<template>
  <el-dialog
    :visible.sync="visible"
    title="详情"
    width="80%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      :model="dataForm"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmitHandle()"
      :label-width="$i18n.locale === 'en-US' ? '140px' : '100px'"
    >
      <el-row :gutter="30">
        <el-col :span="13">
          <el-form-item
            label="受案号"
            prop="caseNum"
          >
            <el-input
              v-model="dataForm.caseNum"
              placeholder="受案号"
              readonly
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item
            label="案件名称"
            prop="caseName"
          >
            <el-input
              v-model="dataForm.caseName"
              placeholder="案件名称"
              readonly
            ></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="30">
        <el-col :span="13">

          <el-form-item
            label="案件比"
            prop="caseQuality"
          >
            <el-input
              v-model="dataForm.caseQuality"
              placeholder="案件比"
              readonly
            ></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="11">
          <el-form-item
            label="受理日期"
            prop="acceptanceDate"
          >
            <el-input
              v-model="dataForm.acceptanceDate"
              readonly
              placeholder="受理日期"
            ></el-input>
          </el-form-item>

        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="13">
          <el-form-item
            label="强制措施"
            prop="coerciveMeasures"
          >
            <el-input
              v-model="dataForm.coerciveMeasures"
              placeholder="强制措施"
              readonly
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item
            label="审结日期"
            prop="completeDate"
          >
            <el-input
              v-model="dataForm.completeDate"
              placeholder="审结日期"
              readonly
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item
        label="办理期限"
        prop="deadline"
      >
        <el-input
          v-model="dataForm.deadline"
          placeholder="办理期限"
          readonly
        ></el-input>
      </el-form-item>
      <el-row
        :gutter="30"
        class="user"
      >
        <el-col
          :span="12"
          v-for="(item,index) in list"
          :key="index"
        >
          <el-form-item
            :label="index==0?'案件相关人员':''"
            :label-width="index%2==0?'100px':'0px'"
            prop="userLists"
          >

            <el-input
              v-model="item.detail"
              placeholder="案件相关人员"
              readonly
            ></el-input>

          </el-form-item>
        </el-col>

      </el-row>
      <el-form-item
        label="案件详情"
        prop="caseDetail"
      >
        <el-input
          type="textarea"
          v-model="dataForm.caseDetail"
          placeholder="案件详情"
          rows="3"
          readonly
        ></el-input>
      </el-form-item>

    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <!--  <el-button
        type="primary"
        @click="dataFormSubmitHandle()"
      >{{ $t('confirm') }}</el-button> -->
    </template>
  </el-dialog>
</template>

<script>
import debounce from "lodash/debounce";
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: "",
        caseNum: "",
        caseName: "",
        deadline: "",
        acceptanceDate: "",
        completeDate: "",
        coerciveMeasures: "",
        caseQuality: "",
        caseDetail: "",
        creator: "",
        createDate: "",
      },
      list: [],
    };
  },
  computed: {},
  methods: {
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get(`/fhjw/fhjwcase/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          this.dataForm.userLists.forEach((ele) => {
            if (ele.userRole == "当事人") {
              let idNo = "暂无";
              if (ele.userIdno) {
                idNo = ele.userIdno;
              }
              this.list.push({
                detail:
                  ele.userRole +
                  "：" +
                  ele.username +
                  "，" +
                  "联系方式：" +
                  ele.mobile +
                  "，" +
                  "身份证号：" +
                  idNo,
              });
            } else {
              this.list.push({
                detail:
                  ele.userRole +
                  "：" +
                  ele.username +
                  "，" +
                  "联系方式：" +
                  ele.mobile,
              });
            }
          });
          console.log(this.list);
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
.no-index {
  width: calc(50% - 10px);
  margin-top: 20px;
  margin-right: 10px;
}
.index {
  width: calc(50% - 10px);
  margin-right: 10px;
}

/deep/.el-col {
  padding-left: 0;
}
</style>
