<template>
  <div>
    <div class="dialog-h-content scroll-h">
      <div v-if="formType==='detail' && view_real_data"
           class="div_tuomin">
        <el-button size="mini"
                   class="diy-button--search"
                   @click="handleTuomin">显示脱敏信息</el-button>
      </div>
      <div class="epidemic-form">
        <el-form v-if="formType !== 'detail'"
                 ref="ref_form1"
                 :inline="true"
                 :model="formData"
                 :rules="dataRule"
                 class="form">
          <el-form-item label="姓名"
                        prop="name"
                        label-width="220px"
                        style="display: block">
            <span>{{ formData.name }}</span>
            <!-- <el-input class="item_width_2"
                    placeholder="请输入姓名"
                    clearable

                    v-model="formData.name">
          </el-input> -->
          </el-form-item>

          <el-form-item label="手机号"
                        prop="mobile"
                        label-width="220px"
                        style="display: block">
            <span>{{ formData.mobile }}</span>
            <!-- <el-input class="item_width_2"
                    placeholder="请输入手机号"
                    clearable
                    v-model="formData.mobile">
          </el-input> -->
          </el-form-item>
          <el-form-item label="证件号"
                        prop="idCard"
                        label-width="220px"
                        style="display: block">
            <span>{{ formData.idCard }}</span>
            <!-- <el-input class="item_width_2"
                    placeholder="请输入身份证号"
                    clearable
                    v-model="formData.idCard">
          </el-input> -->
          </el-form-item>
          <el-form-item :label="reasonTitle"
                        prop="reason"
                        label-width="220px"
                        style="display: block">
            <el-input class="item_width_4"
                      :placeholder="'请输入'+reasonTitle"
                      clearable
                      v-model="formData.reason">
            </el-input>
          </el-form-item>
          <el-form-item label="隔离状态"
                        prop="isolatedState"
                        label-width="220px"
                        style="display: block">
            <el-select v-model="formData.isolatedState"
                       class="item_width_4"
                       placeholder="请选择"
                       clearable>
              <el-option v-for="item in options.isolatedState"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <div v-if="isPanshi">
            <el-form-item label="管控时间"
                          prop="gkStartTime"
                          label-width="220px"
                          style="display: block">
              <el-date-picker v-model="gkTimeRange"
                              size="small"
                              type="daterange"
                              @change="handleGkTimeChange"
                              format="yyyy-MM-dd"
                              value-format="yyyy-MM-dd"
                              range-separator="至"
                              start-placeholder="开始时间"
                              end-placeholder="结束时间">

              </el-date-picker>
            </el-form-item>

            <el-form-item label="镇（街）干部"
                          prop="gbName"
                          label-width="220px"
                          style="display: block">
              <el-input class="item_width_4"
                        placeholder="请输入镇（街）干部"
                        clearable
                        v-model="formData.gbName">
              </el-input>
            </el-form-item>

            <el-form-item label="镇（街）干部联系方式"
                          prop="gbMobile"
                          label-width="220px"
                          style="display: block">
              <el-input class="item_width_4"
                        placeholder="请输入镇（街）干部联系方式"
                        clearable
                        v-model="formData.gbMobile">
              </el-input>
            </el-form-item>

            <el-form-item label="村（社区）网格管理员"
                          prop="gridManager"
                          label-width="220px"
                          style="display: block">
              <el-input class="item_width_4"
                        placeholder="请输入村（社区）网格管理员"
                        clearable
                        v-model="formData.gridManager">
              </el-input>
            </el-form-item>

            <el-form-item label="村（社区）网格管理员联系方式"
                          prop="gridManagerMobile"
                          label-width="220px"
                          style="display: block">
              <el-input class="item_width_4"
                        placeholder="请输入村（社区）网格管理员联系方式"
                        clearable
                        v-model="formData.gridManagerMobile">
              </el-input>
            </el-form-item>

            <el-form-item label="基层医务工作者"
                          prop="healthWorker"
                          label-width="220px"
                          style="display: block">
              <el-input class="item_width_4"
                        placeholder="请输入基层医务工作者"
                        clearable
                        v-model="formData.healthWorker">
              </el-input>
            </el-form-item>

            <el-form-item label="基层医务工作者联系方式"
                          prop="healthWorkerMobile"
                          label-width="220px"
                          style="display: block">
              <el-input class="item_width_4"
                        placeholder="请输入基层医务工作者联系方式"
                        clearable
                        v-model="formData.healthWorkerMobile">
              </el-input>
            </el-form-item>

            <el-form-item label="民警"
                          prop="policeName"
                          label-width="220px"
                          style="display: block">
              <el-input class="item_width_4"
                        placeholder="请输入民警"
                        clearable
                        v-model="formData.policeName">
              </el-input>
            </el-form-item>

            <el-form-item label="民警及联系方式"
                          prop="policeMobile"
                          label-width="220px"
                          style="display: block">
              <el-input class="item_width_4"
                        placeholder="请输入民警及联系方式"
                        clearable
                        v-model="formData.policeMobile">
              </el-input>
            </el-form-item>

            <el-form-item label="志愿者"
                          prop="volunteerName"
                          label-width="220px"
                          style="display: block">
              <el-input class="item_width_4"
                        placeholder="请输入志愿者"
                        clearable
                        v-model="formData.volunteerName">
              </el-input>
            </el-form-item>

            <el-form-item label="志愿者联系方式"
                          prop="volunteerMobile"
                          label-width="220px"
                          style="display: block">
              <el-input class="item_width_4"
                        placeholder="请输入志愿者联系方式"
                        clearable
                        v-model="formData.volunteerMobile">
              </el-input>
            </el-form-item>
          </div>

          <el-form-item label="备注"
                        prop="remark"
                        label-width="220px"
                        style="display: block">
            <el-input class="item_width_4"
                      type="textarea"
                      maxlength="500"
                      show-word-limit
                      :autosize="{ minRows: 2, maxRows: 5 }"
                      clearable
                      placeholder="请输入通知备注"
                      v-model="formData.remark"></el-input>
          </el-form-item>

          <el-form-item label="通知渠道"
                        prop="channel"
                        label-width="220px"
                        style="display: block">
            <el-checkbox v-model="formData.isSelChannel"
                         @change="handleChannelChange"
                         key="0"
                         label="0">小程序通知</el-checkbox>
            <!-- <el-checkbox-group v-model="formData.channel">
              <el-checkbox key="0"
                           label="0">小程序通知</el-checkbox>
              <el-checkbox key="1"
                           label="1">短信通知</el-checkbox>

            </el-checkbox-group> -->
          </el-form-item>

          <el-form-item v-if="formData.isSelChannel"
                        label="通知内容"
                        prop="content"
                        label-width="220px"
                        style="display: block">
            <el-input class="item_width_4"
                      type="textarea"
                      maxlength="500"
                      show-word-limit
                      :autosize="{ minRows: 4, maxRows: 10 }"
                      clearable
                      placeholder="请输入通知内容"
                      v-model="formData.content"></el-input>
          </el-form-item>

        </el-form>
      </div>

      <div v-if="formType === 'detail'"
           class="m-row">
        <div class="m-info">
          <div class="info-prop">
            <span class="info-title-6">姓名：</span>
            <span>{{ formData.name||'--'  }}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-6">手机号：</span>
            <span>{{ formData.showMobile||'--' }}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-6">证件号：</span>
            <span>{{ formData.showIdCard||'--'  }}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-6">{{reasonTitle}}：</span>
            <span>{{ formData.reason||'--'  }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-6">隔离状态：</span>
            <span>{{ formData.isolatedStateShow||'--'  }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-6">管控时间：</span>
            <span>{{ formData.gkTime||'--'  }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-6">镇（街）干部及联系方式：</span>
            <span>{{ formData.gb||'--'  }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-6">村（社区）网格管理员及联系方式：</span>
            <span>{{ formData.gridManagerShow||'--'  }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-6">基层医务工作者及联系方式：</span>
            <span>{{ formData.healthWorkerShow||'--'  }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-6">民警及联系方式：</span>
            <span>{{ formData.policeShow||'--'  }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-6">志愿者及联系方式：</span>
            <span>{{ formData.volunteerShow||'--'  }}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-6">备注：</span>
            <span>{{ formData.remark||'--'  }}</span>
          </div>

        </div>
      </div>

    </div>

    <div class="div-btn">
      <el-button size="small"
                 @click="handleCancle">{{formType==='detail'?'关 闭':'取 消'}}</el-button>

      <el-button v-if="formType!=='detail'"
                 size="small"
                 type="primary"
                 :disabled="btnDisable"
                 @click="handleComfirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost } from "@/js/dai/request";
import { mapGetters } from "vuex";

let loading; // 加载动画
function iniGetFmData () {
  return {
    attentionType: 2,
    name: "",
    idCard: "",
    mobile: "",
    showIdCard: '',
    showMobile: '',
    reason: "",
    remark: "",
    isSelChannel: false,
    channel: [],
    content: "",
    isolatedState: "", //隔离状态
    gkStartTime: '',
    gkEndTime: '',
    gbName: '',
    gbMobile: '',
    gridManager: '',
    gridManagerMobile: '',
    healthWorker: '',
    healthWorkerMobile: '',
    policeName: '',
    policeMobile: '',
    volunteerName: '',
    volunteerMobile: '',
  };
}

export default {
  data () {
    return {
      formType: "edit",
      veroId: '',
      gridList: [],

      btnDisable: false,

      formData: iniGetFmData(),

      options: {
        isolatedState: [],
      },
      gkTimeRange: [],
    };
  },

  components: {},

  async mounted () {
    await this.getFmOptions("isolatedState", "/sys/dict/data/dictlist", {
      dictType: "isolatedState",
    });
  },

  destroyed () { },

  methods: {
    async handleTuomin () {
      const url = "/data/aggregator/epmetuser/detailByType";

      const { data, code, msg } = await requestPost(url, {
        id: this.veroId,
        type: this.fromSource,
      });

      if (code === 0) {
        this.$set(this.formData, 'showMobile', data.mobile)
        this.$set(this.formData, 'showIdCard', data.idCard)
      } else {
        this.$message.error(msg);
      }

    },

    handleGkTimeChange (time) {
      if (time) {
        this.formData.gkStartTime = time[0];
        this.formData.gkEndTime = time[1];
      } else {
        this.formData.gkStartTime = "";
        this.formData.gkEndTime = "";
      }
    },

    handleChannelChange (val) {
      this.formData.content = "";
    },

    async initForm (formType, row) {
      this.formType = formType;
      if (this.formType === 'edit') {
        this.$refs["ref_form1"].resetFields();
      }

      row.channel = [];
      row.content = "";
      row.attentionType = 2;
      row.isSelChannel = false;
      this.formData = JSON.parse(JSON.stringify(row));
      this.gkTimeRange = row.gkTimeRange
      this.veroId = row.id
      this.options.isolatedState.forEach(element => {
        if (this.formData.isolatedState === element.value) {
          this.formData.isolatedStateShow = element.label
        }
      });

    },



    handleComfirm () {
      this.$refs["ref_form1"].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj);
        } else {
          this.submit();
        }
      });
    },

    async submit () {
      if (this.formData.isSelChannel) {
        if (!this.formData.content) {
          this.$message({
            type: "warning",
            message: "请填写通知内容",
          });
          return false;
        } else {
          this.formData.channel = ["0"];
        }
      } else {
        this.formData.channel = [];
      }

      this.btnDisable = true;
      setTimeout(() => {
        this.btnDisable = false;
      }, 5000);
      let url = "/epmetuser/icEpidemicSpecialAttention/vaccination-update";

      // url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icEpidemicSpecialAttention/vaccination-update"

      const { data, code, msg } = await requestPost(url, this.formData);

      if (code === 0) {
        this.$message({
          type: "success",
          message: "操作成功",
        });
        this.resetData();
        this.$emit("dialogOk");
        this.btnDisable = false;
      } else {
        this.btnDisable = false;
        this.$message.error(msg);
      }
    },

    handleCancle () {
      this.resetData();
      this.$emit("dialogCancle");
    },

    async getFmOptions (field, url, params, cookFn) {
      const { data, code, msg } = await requestPost(url, {
        ...params,
      });

      if (code === 0) {
        this.options[field] =
          typeof cookFn == "function" ? cookFn(data) : data || [];
      } else {
        this.$message.error("请求基础数据失败！");
      }
    },

    resetData () {
      this.veroId = "";

      this.formData = iniGetFmData();
    },

    handleSizeChange (val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.loadTable();
    },
    handleCurrentChange (val) {
      this.pageNo = val;
      this.loadTable();
    },

    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  computed: {
    tableHeight () {
      return 200;
    },

    ...mapGetters(["clientHeight", "iframeHeight"]),
    dataRule () {
      return {
        isolatedState: [
          { required: true, message: "隔离状态必填", trigger: "blur" },
        ],

        channel: [{ required: false }],
        content: [{ required: false }],
      };
    },
  },
  props: {
    view_real_data: {//显示【显示脱敏信息】按钮
      type: Boolean,
      default: false,
    },
    fromSource: {//显示【显示脱敏信息】按钮
      type: String,
      default: '',
    },
    isPanshi: {
      type: Boolean,
      default: false
    },
    reasonTitle: {
      type: String,
      default: '关注原因'
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/detail-main.scss";
</style>
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/epidemic.scss";

.div_tuomin {
  position: absolute;
  top: 0;
  right: 40px;
  z-index: 1000;
}
</style>


