<template>
  <Dialog :is-dialog-exist="showDialog" :title="dialogTitle" :dialog-style="dialogStyle" @close-dialog="handleClose">
    <el-container>
      <el-main>
        <div class="title-container">
          <div class="block-blue-container"></div>
          <span class="block-blue-container-title">企业认证信息</span>
        </div>
        <el-form ref="formData" :model="formData" label-width="auto">

          <el-row :gutter="80">
            <el-col :span="12">
              <el-form-item label="企业名">
                <span class="text-gray">{{ formData.companyName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业地址">
                <span class="text-gray">{{ formData.companyAddress === undefined ? '-' : formData.companyAddress }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="80">
            <el-col :span="12">
              <el-form-item label="法人姓名">
                <span class="text-gray">{{ formData.companyRegistrar }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="统一信用代码">
                <span class="text-gray">{{ formData.companyNo === undefined ? '-' : formData.companyNo }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="80">
            <el-col :span="12">
              <el-form-item label="营业执照">
                <el-image v-show="formData.companyPic" :src="formData.companyPic" :preview-src-list="[formData.companyPic]" style="width: 300px;"></el-image>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <span :style="{color: formData.companyVerify === '3' ? '#FF494A' :
                                      formData.companyVerify === '2' ? '#FFBB00' :
                                      formData.companyVerify === '1' ? '#0DB903' : '#999999'
                }"> • {{ formData.companyVerifyText }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="80">
            <el-col :span="12">
              <el-form-item label="理由">
                <span class="text-gray">{{ formData.memo }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作">
                <el-button size="mini" type="primary" plain @click="openAuditDialog">审核</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="80">
            <el-col :span="12">
              <el-form-item label="提交时间">
                <span class="text-gray">{{ formData.submitTime === undefined ? '-' : formData.submitTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核时间">
                <span class="text-gray">{{ formData.auditTime === undefined ? '-' : formData.auditTime }}</span>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
        <el-button type="info" plain @click="handleClose">取消</el-button>
      </el-footer>
    </el-container>

    <!-- 审核弹窗 -->
    <AuditDialog :show-dialog="isAuditVisible"
                 :dialog-title="auditDialogTitle"
                 :select-item="auditSelectItem"
                 :audit-options="stateOptions"
                 @handle-close="isAuditVisible = false"
                 @handle-success="_fetchDetailData"
    ></AuditDialog>

  </Dialog>
</template>

<script>
import Dialog from '@/components/Dialog/index'
import AuditDialog from './audit-dialog'
import { fetchDetail } from '@/api/master-info-manage/company-authentication'
/**
 * 站长等级的编辑dialog
 */
export default {
  components: { Dialog, AuditDialog },
  props: {
    // 接收行数据
    selectItem: {
      type: Object,
      default: () => {}
    },
    // 弹窗控制参数
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // UI参数
      dialogTitle: '明细',
      // dialog样式
      dialogStyle: {
        '--dialog-width': '1136px',
        '--dialog-height': '671px',
        '--title-height': '51px'
      },
      // 审核弹窗
      isAuditVisible: false,
      auditDialogTitle: '审核',
      auditSelectItem: {},
      // 提交参数
      formData: {

      },
      // 校验规则
      rules: {},
      stateOptions: []
    }
  },
  watch: {
    showDialog(val) {
      if (val) {
        this.initDataView()
      }
    }
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.$emit('handle-close')
    },
    // 提交弹窗
    handleSuccess() {
      this.$emit('handle-success')
    },
    handleConfirm() {
      this.handleSuccess()
      this.handleClose()
    },
    // 初始化弹窗参数
    initDataView() {
      console.log('初始化弹窗参数')
      this._fetchDetailData()
    },
    // 打开审核
    openAuditDialog() {
      this.auditSelectItem = {}
      this.auditSelectItem.uid = this.formData.id
      this.auditSelectItem.companyVerify = this.formData.companyVerify
      this.auditSelectItem.memo = this.formData.memo
      this.isAuditVisible = true
      console.log('审核数据 = ' + JSON.stringify(this.auditSelectItem))
    },
    // 提交表单
    submitForm() {
      this.$refs.formData.validate(vaild => {
        if (vaild && this.customValidate()) {
          console.log('提交表单')
        }
      })
    },
    customValidate() {
    },
    // 获取详情数据
    _fetchDetailData() {
      const params = { uid: this.selectItem.uid }
      fetchDetail(params).then(resp => {
        if (resp.code === 0) {
          this.formData = resp.data
          this.stateOptions = resp.data.state
        } else {
          this.$message.error(resp.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-container {
    width: 100%;
    height: 100%;
    .el-main {
      height: 90%;
      width: 100%;
      padding-left: 80px;
      padding-right: 80px;

      // 头部标题
      .title-container {
        display: flex;
        align-items: center;
        .block-blue-container {
          width: 5px;
          height: 16px;
          background: #3DA2FF;
        }
        .block-blue-container-title {
          margin-left: 6px;
          font-size: 18px;
          font-weight: 400;
          color: #333333;
          line-height: 25px;
        }
      }

      // 表单数据
      .el-form {
        padding-right: 80px;
        padding-left: 80px;
        margin-top: 20px;
        .text-gray {
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          line-height: 28px;
        }
      }

    }
    .el-footer {
      height: 10%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
