
<template>
    <el-dialog :visible.sync="showDialog" :title="title" :modal-append-to-body="false" style="text-align: left;" @close="closeDialog" :close-on-click-modal="false" width="900px">
      <div class="user-panel" v-loading="loading">
        <el-tabs type="border-card">
          <el-tab-pane label="实名信息">
            <el-descriptions class="margin-top" title="实名信息" :column="3" border>
              <template slot="extra">
                <el-button v-if="technicianModel.isVerified != true" type="primary" size="small" @click="checkedRealName">实名审核</el-button>
              </template>
              <el-descriptions-item>
                <template slot="label">姓名</template>
                {{technicianModel.realName}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">性别</template>
                <span v-if="technicianModel.gender == 1">男</span>
                <span v-if="technicianModel.gender == 2">女</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">身份证号</template>
                {{technicianModel.idCard}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">身份证照片</template>
                <el-image v-for="url in technicianModel.idCardImageList" style="height: 224px" :key="url" :src="url"></el-image>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="入驻信息">
            <el-descriptions class="margin-top" title="入驻信息" :column="2" :size="size" border>
              <template slot="extra">
                <el-button v-if="technicianModel.status != '2'" type="primary" size="small" @click="checkedSettleIn">入驻审核</el-button>
              </template>
              <el-descriptions-item>
                <template slot="label">服务地区</template>
                {{technicianModel.region}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">业务范围</template>
                {{technicianModel.businessScope}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">服务信息</template>
                <pre>
                  {{technicianModel.serviceInfo}}
                </pre>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="资质信息">
            <el-descriptions class="margin-top" title="资质信息" :column="1" border>
              <template slot="extra">
                <el-button v-if="technicianModel.qualificationStatus != true" type="primary" size="small" @click="checkedQualification">资质审核</el-button>
              </template>
              <el-descriptions-item>
                <template slot="label">资质照片</template>
                <el-image v-for="url in technicianModel.qualificationList" style="height: 224px" :key="url" :src="url"></el-image>
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">确 定</el-button>
      </span> -->
    </el-dialog>
  </template>
  <script>
  import Constant from "@/constant";
  import { getToken } from "@/utils/auth"; // get token from cookie
  import technicianInfoApi from "@/api/base/technicianInfo";
  
  export default {
    props: ["businessKey", "title"],
    data() {
      return {
          technicianModel: {},
          showDialog: true,
          loading: false,
          submitting: false,
      };
    },
    methods: {
      showInfo() {
        var self = this;
        self.loading = true;
  
        technicianInfoApi.detail(self.businessKey).then(function(response) {
          self.loading = false;
          var jsonData = response.data;
          
          if (jsonData.result) {
            self.technicianModel = jsonData.data.technician;
            console.log(self.technicianModel);
          } else {
            self.$message.error(jsonData.message + "");
          }
  
          self.loading = false;
        }).catch((error)=>{
          self.loading = false;
        });
      },
      closeDialog() {
        this.$emit("close", false);
      },
      checkedRealName(record){
        var self = this;
  
        this.$confirm("是否确认审核？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            technicianInfoApi.checkedRealName(self.businessKey).then(function(response) {
            var jsonData = response.data;

            if (jsonData.result) {
              self.showInfo();

              self.$message({
                type: "success",
                message: "审核成功!"
              });
            }
          });
        });
      },
      checkedSettleIn(record){
        var self = this;
  
        this.$confirm("是否确认审核？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            technicianInfoApi.checkedSettleIn(self.businessKey).then(function(response) {
            var jsonData = response.data;

            if (jsonData.result) {
              self.showInfo();

              self.$message({
                type: "success",
                message: "审核成功!"
              });
            }
          });
        });
      },
      checkedQualification(record){
        var self = this;
  
        this.$confirm("是否确认审核？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
            technicianInfoApi.checkedQualification(self.businessKey).then(function(response) {
            var jsonData = response.data;

            if (jsonData.result) {
              self.showInfo();

              self.$message({
                type: "success",
                message: "审核成功!"
              });
            }
          });
        });
      },
    },
    async mounted() {
      var self = this;
      self.showInfo();
    },
  };
  </script>
  <style scoped>
  .user-panel {
    margin: 10px auto;
  }
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  </style>