<template>
  <div class="account-examine">
    <el-dialog
      v-bind="$attrs"
      :title="state.dialogTitle"
      v-model="state.modalVisible"
      :before-close="cancelDialog"
      :append-to-body="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :lock-scroll="false"
      class="account-dialog"
      draggable
    >
      <el-card class="mb-4" shadow="never">
        <el-descriptions title="基本信息" size="small" :column="3">
          <el-descriptions-item label="用户类型">{{ state.viewData.accounttype }}</el-descriptions-item>
          <el-descriptions-item label="商户类型">{{ state.viewData.accountshtype }}</el-descriptions-item>
          <el-descriptions-item label="关联代理商">{{ state.viewData.accountagentsid }}</el-descriptions-item>
          <el-descriptions-item label="公司名称" v-if="state.viewData.accountshtype === '企业'">{{ state.viewData.accountgsm }}</el-descriptions-item>
          <el-descriptions-item label="公司地址" v-if="state.viewData.accountshtype === '企业'">{{ state.viewData.accountgsdz }}</el-descriptions-item>
          <el-descriptions-item label="纳税人识别号" v-if="state.viewData.accountshtype === '企业'">{{ state.viewData.accountlsrsbh }}</el-descriptions-item>
          <el-descriptions-item label="企业类型" v-if="state.viewData.accountshtype === '企业'">{{ state.viewData.accountqylx }}</el-descriptions-item>
          <el-descriptions-item label="所属行业">{{ state.viewData.accountsshy }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ state.viewData.accountlxr }}</el-descriptions-item>
          <el-descriptions-item label="联系人手机号">{{ state.viewData.accountlxrphone }}</el-descriptions-item>
          <el-descriptions-item label="联系人身份证">{{ state.viewData.accountzjh }}</el-descriptions-item>
          <el-descriptions-item label="业务介绍">{{ state.viewData.accountywjs }}</el-descriptions-item>
          <el-descriptions-item label="AI客服">{{ state.viewData.accountainame }}</el-descriptions-item>
          <el-descriptions-item label="推荐人">{{ state.viewData.accounttjsid }}</el-descriptions-item>
          <el-descriptions-item label="营业执照" class-name="align-middle">
            <el-image v-for="(item, index) in state.yyzzImages" :key="index" :src="item.url" fit="contain" style="width: 100px; height: 100px; margin-right: 10px" />
          </el-descriptions-item>
          <el-descriptions-item label="身份证" class-name="align-middle">
            <el-image v-for="(item, index) in state.sfzImages" :key="index" :src="item.url" fit="contain" style="width: 100px; height: 100px; margin-right: 10px" />
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <el-form ref="examineRef" :model="state.form" :rules="state.rules" label-width="80px">
        <el-row>
          <el-col :span="8">
            <!-- 待审核，审核通过，审核不通过 -->
            <el-form-item label="审核状态" prop="accountshstatus">
              <el-radio-group v-model="state.form.accountshstatus">
                <el-radio label="审核通过">通过</el-radio>
                <el-radio label="审核不通过">不通过</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核时间" prop="accountshdate">
              <el-input v-model="state.form.accountshdate" placeholder="审核时间" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核人" prop="accountshr">
              <el-input v-model="state.form.accountshr" placeholder="审核人" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核备注" prop="accountshbz">
              <el-input type="textarea" :rows="5" v-model="state.form.accountshbz" placeholder="审核备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitDialog" :loading="state.submitLoading">确 定</el-button>
          <el-button @click="cancelDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import useAccountManageStore from '@store/modules/accountManage'
import useUserStore from '@store/modules/user'
import useBaseStore from '@store/modules/base'
import {nextTick} from 'vue'
import dayjs from 'dayjs'

const accountManageStore = useAccountManageStore()
const userStore = useUserStore()
const baseStore = useBaseStore()
const {proxy} = getCurrentInstance()
const examineRef = ref(null)

const state = reactive({
  submitLoading: false,
  modalVisible: false,
  dialogTitle: '',
  viewData: {},
  form: {
    accountshstatus: '审核通过',
    accountshdate: '',
    accountshr: userStore.nickname,
    accountshbz: ''
  },
  sfzImages: [],
  yyzzImages: [],
  rules: {
    accountshstatus: [{required: true, message: '请选择审核状态', trigger: 'blur'}],
    accountshdate: [{required: true, message: '请选择审核时间', trigger: 'blur'}],
    accountshr: [{required: true, message: '请输入审核人', trigger: 'blur'}]
    // accountshbz: [
    //   { required: true, message: '请输入审核备注', trigger: 'blur' }
    // ]
  }
})

const emits = defineEmits(['refresh'])

const getDataView = (accountid) => {
  nextTick(async () => {
    const result = await accountManageStore.view({accountid: accountid})
    state.viewData = result
    state.form.accountshdate = dayjs().format('YYYY-MM-DD HH:mm:ss')
    await getImages(accountid)
  })
}

const submitDialog = () => {
  examineRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const params = {
          ...state.form,
          accountid: state.viewData.accountid,
          accountstatus: 1
        }
        state.submitLoading = true
        await accountManageStore.accountExamine(params)
        state.viewData = {}
        state.sfzImages = []
        state.yyzzImages = []
        state.submitLoading = false
        examineRef.value.resetFields()
        proxy.$modal.msgSuccess('操作成功！')
        emits('refresh')
        state.modalVisible = false
      } catch (error) {
        state.submitLoading = false
      }
    }
  })
}

const cancelDialog = () => {
  state.viewData = {}
  state.sfzImages = []
  state.yyzzImages = []
  examineRef.value.resetFields()
  state.modalVisible = false
}

const openDialog = async (data = {}) => {
  if (Object.keys(data).length) await getDataView(data.accountid)
  state.modalVisible = true
  state.dialogTitle = Object.keys(data).length ? `审核【${data.accountname}】` : ''
}

const getImages = async (id) => {
  try {
    const imgDataList = await baseStore.attachmenLoad({attlsh: id, pageindex: 1, rows: 9999})
    imgDataList.Data.forEach((item) => {
      console.log('图片：', item)
      if (item.attmodel === 'sfz')
        state.sfzImages.push({
          url: item.url
        })
      if (item.attmodel === 'yyzz')
        state.yyzzImages.push({
          url: item.url
        })
    })
  } catch (error) {}
}

defineExpose({
  openDialog
})
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
