<script lang="ts" setup name="SourceApprovalDetail">
// 溯源供方审批详情
import { reactive, ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, UploadInstance, UploadProps, UploadUserFile } from 'element-plus'
import type { IButton, ISupplier, traceSupplierPerson } from '../list_interface'
import ManageBox from './manageBox.vue'
import showPhoto from '@/views/system/tool/showPhoto.vue'
import { exportFile } from '@/utils/exportUtils'
import { UploadFile } from '@/api/measure/file'
import { getSoucreLisListExport, getSoucreLisUpdate, getSoucreListDetail, getSoucreListlevelType } from '@/api/measure/source'
import { submitApproval } from '@/api/approval'
const loading = ref(false) // 表单加载状态
const infoId = ref('') // id
const buttonArray = ref<IButton[]>([])
const pageType = ref('detail') // 页面类型: detail
const buttonLoading = ref(false) // 按钮加载状态

const buttonsSet: { [key: string]: IButton[] } = {
  2: [{ name: '查看', type: 'primary' },
    { name: '同意', type: 'primary' },
    { name: '驳回', type: 'primary' },
    { name: '拒绝', type: 'danger' },
  ],
  3: [
    { name: '取消', type: 'primary' },
  ],
}
// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  const status = $route.params.type
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// 溯源供方详情表单
const dataForm = ref<ISupplier>({
  id: '',
  businessContent: '',
  supplierName: '',
  supplierNo: '',
  bankAccount: '',
  bankAccountNumber: '',
  bankName: '',
  briefName: '',
  businessScope: '',
  companyAddress: '',
  companyArea: '',
  companyCity: '',
  companyCountry: '',
  companyProvince: '',
  createTime: '',
  director: '',
  fax: '',
  invoiceAddress: '',
  invoiceArea: '',
  invoiceCity: '',
  invoiceCountry: '',
  invoiceProvince: '',
  mailbox: '',
  minioFileName: '',
  mobile: '',
  phone: '',
  postalCode: '',
  remark: '',
  taxNumber: '',
  website: '',
  traceSupplierPersonList: [],
})
// 获取表单详情
const getInfo = () => {
  getSoucreListDetail({ id: infoId.value }).then((res) => {
    dataForm.value = res.data
    if (dataForm.value.approvalStatus) {
      // 待审批
      if (dataForm.value.approvalStatus == '2') {
        buttonArray.value = buttonsSet[dataForm.value.approvalStatus]
      }
      else if (dataForm.value.approvalStatus == '3') { // 审批中
        // todo：判断当前用户是否为发起人
        buttonArray.value = buttonsSet[dataForm.value.approvalStatus]
      }
    }
  })
}
getInfo()

const ruleFormRef = ref<FormInstance>()
const traceSupplierPersonList: Ref<traceSupplierPerson[]> = ref([])
const columns = [
  { text: '人员编号', value: 'personNo' },
  { text: '姓名', value: 'name' },
  { text: '工作部门', value: 'department' },
  { text: '职务', value: 'job' },
  { text: '联系方式', value: 'phone' },
]

const provinceList = ref([])
const fileList = ref<UploadUserFile[]>([])
const cityList = ref([])
const areaList = ref([])
const invoiceProvince = ref([])
const invoiceCityList = ref([])
const areaInvoiceList = ref([])

// 初始化router
const $router = useRouter()
// 关闭新增页面的回调
const close = () => {
  $router.back()
}

const approvalActivities = [
  {
    name: '张三',
    deptName: '审计局',
    content: '同意',
    timestamp: '2018-04-15 08:00:00',
  },
  {
    name: '张三',
    content: 'Approved',
    timestamp: '2018-04-13',
  },
  {
    name: '张三',
    content: 'Success',
    timestamp: '2018-04-11',
  },
]

// 获取公司地址省级
const getCompanyAddress = (type: string) => {
  getSoucreListlevelType(type).then((res) => {
    provinceList.value = res.data
  })
}
// 公司地址省级的值发生改变
const changeProvince = (e: any) => {
  cityList.value = []
  areaList.value = []
  dataForm.value.companyCity = ''
  dataForm.value.companyArea = ''

  getSoucreListlevelType(e).then((res) => {
    cityList.value = res.data
  })
}
// 公司地址市级发生改变
const cityChange = (e: any) => {
  areaList.value = []
  dataForm.value.companyArea = ''
  getSoucreListlevelType(e).then((res) => {
    areaList.value = res.data
  })
}
// 获取到开票地址省级
const getinvoiceProvinceList = (type: string) => {
  getSoucreListlevelType(type).then((res) => {
    invoiceProvince.value = res.data
  })
}
// 开票地址省级发生改变
const changeInvoice = (e: any) => {
  dataForm.value.invoiceCity = ''
  dataForm.value.invoiceArea = ''
  getSoucreListlevelType(e).then((res) => {
    invoiceCityList.value = res.data
  })
}
// 开票地址市级发生改变
const invoiceCityChange = (e: string) => {
  dataForm.value.invoiceArea = ''
  getSoucreListlevelType(e).then((res) => {
    areaInvoiceList.value = res.data
  })
}
// 审批结束回调
const approvalSuccess = () => {
  getInfo()
}
// 取消
const handleCancel = () => {
  const params = {
    taskId: dataForm.value.taskId!,
    comments: '',
  }
  ElMessageBox.confirm(
    '确认取消该审批吗？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
    .then(() => {
      submitApproval('revoke', params).then((res) => {
        ElMessage({
          type: 'success',
          message: '取消成功',
        })
      })
    })
}
const approvalDialog = ref()
// 点击数据后的操作按钮
const clickBtn = (row: ISupplier, buttonType: string) => {
  switch (buttonType) {
    case '同意':
      approvalDialog.value.initDialog('agree', row.taskId)
      break
    case '驳回':
      approvalDialog.value.initDialog('reject', row.taskId)
      break
    case '拒绝':
      approvalDialog.value.initDialog('refuse', row.taskId)
      break
    case '取消':
      handleCancel()
      break
  }
}
</script>

<template>
  <app-container>
    <detail-page title="溯源供方审批">
      <template #btns>
        <el-button v-for="(item, index) in buttonArray" :key="index" type="primary" @click="getAddList(ruleFormRef, item)">
          {{ item }}
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="dataForm"
        class="demo-form-inline"
        label-width="auto"
        label-position="right"
        :rules="rules"
      >
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="溯源供方编号:" prop="supplierNo">
              <el-input
                v-model="dataForm.supplierNo"
                :placeholder="
                  pageType === 'detail' ? '无' : '请输入溯源供方编号'
                "
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="税号:" prop="taxNumber">
              <el-input
                v-model="dataForm.taxNumber"
                :placeholder="pageType === 'detail' ? '无' : '请输入税号'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮编:">
              <el-input
                v-model="dataForm.postalCode"
                :placeholder="pageType === 'detail' ? '无' : '请输入邮编'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机:">
              <el-input
                v-model="dataForm.mobile"
                :placeholder="pageType === 'detail' ? '无' : '请输入手机'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="公司名称:" prop="supplierName">
              <el-input
                v-model="dataForm.supplierName"
                :placeholder="pageType === 'detail' ? '无' : '请输入公司名称'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银行账户名:">
              <el-input
                v-model="dataForm.bankAccount"
                :placeholder="pageType === 'detail' ? '无' : '请输入银行账户名'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="负责人:">
              <el-input
                v-model="dataForm.director"
                :placeholder="pageType === 'detail' ? '无' : '请输入负责人'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮箱:">
              <el-input
                v-model="dataForm.mailbox"
                :placeholder="pageType === 'detail' ? '无' : '请输入邮箱'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="公司简称:">
              <el-input
                v-model="dataForm.briefName"
                :placeholder="pageType === 'detail' ? '无' : '请输入公司简称'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银行名称:">
              <el-input
                v-model="dataForm.bankName"
                :placeholder="pageType === 'detail' ? '无' : '请输入银行名称'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话:">
              <el-input
                v-model="dataForm.phone"
                :placeholder="pageType === 'detail' ? '无' : '请输入电话'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="网址:">
              <el-input
                v-model="dataForm.website"
                :placeholder="pageType === 'detail' ? '无' : '请输入网址'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="6">
            <el-form-item label="业务内容:" prop="businessContent">
              <el-input
                v-model="dataForm.businessContent"
                :placeholder="pageType === 'detail' ? '无' : '请输入业务内容'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银行账号:">
              <el-input
                v-model="dataForm.bankAccountNumber"
                :placeholder="pageType === 'detail' ? '无' : '请输入银行账号'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="传真:">
              <el-input
                v-model="dataForm.fax"
                :placeholder="pageType === 'detail' ? '无' : '请输入传真'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-form-item label="公司地址:">
            <el-col :span="4">
              <el-input v-model="dataForm.companyCountry" :disabled="pageType === 'detail'" />
            </el-col>
            <el-col :span="4">
              <el-input v-model="dataForm.companyProvince" :disabled="pageType === 'detail'" />
            </el-col>
            <el-col :span="4">
              <el-input v-model="dataForm.companyCity" :disabled="pageType === 'detail'" />
            </el-col>
            <el-col :span="4">
              <el-input v-model="dataForm.companyArea" :disabled="pageType === 'detail'" />
            </el-col>
            <el-col :span="8">
              <el-input
                v-model="dataForm.companyAddress"
                placeholder="公司详细地址"
                :disabled="pageType === 'detail'"
              />
            </el-col>
          </el-form-item>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-form-item label="开票地址:">
            <el-col :span="4">
              <el-select
                v-model="dataForm.invoiceCountry"
                placeholder="国别"
                :disabled="pageType === 'detail'"
              >
                <el-option label="中国" value="中国" />
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="dataForm.invoiceProvince"
                placeholder="省"
                :disabled="pageType === 'detail'"
                @click="getinvoiceProvinceList('0')"
                @change="changeInvoice"
              >
                <el-option
                  v-for="province in invoiceProvince"
                  :key="province.id"
                  :label="province.areaName"
                  :value="province.id"
                />
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="dataForm.invoiceCity"
                placeholder="市"
                :disabled="pageType === 'detail'"
                @change="invoiceCityChange"
              >
                <el-option
                  v-for="city in invoiceCityList"
                  :key="city.id"
                  :label="city.areaName"
                  :value="city.id"
                />
              </el-select>
            </el-col>
            <el-col :span="4">
              <el-select
                v-model="dataForm.invoiceArea"
                placeholder="区/县"
                :disabled="pageType === 'detail'"
              >
                <el-option
                  v-for="area in areaInvoiceList"
                  :key="area.id"
                  :label="area.areaName"
                  :value="area.id"
                />
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-input
                v-model="dataForm.invoiceAddress"
                placeholder="开票详细地址"
                :disabled="pageType === 'detail'"
              />
            </el-col>
          </el-form-item>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="14">
            <el-form-item label="公司业务范围:">
              <el-input
                v-model="dataForm.businessScope"
                :placeholder="
                  pageType === 'detail' ? '无' : '请输入公司业务范围'
                "
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="14">
            <el-form-item label="备注:">
              <el-input
                v-model="dataForm.remark"
                :placeholder="pageType === 'detail' ? '无' : '请输入备注'"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="marg">
          <el-col :span="14">
            <el-form-item label="附件:">
              <show-photo v-if="dataForm.minioFileName" :minio-file-name="dataForm.minioFileName" />
              <span>无</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title="审批流程">
      <!-- 审批流程 -->
      <div>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in approvalActivities"
            :key="index"
            :timestamp="activity.timestamp"
          >
            <div><span>审批人：</span>{{ activity.name }} <span style="margin-left: 10px;">审批意见：</span>{{ activity.content }}</div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </detail-block>
    <detail-block title="人员信息">
      <el-table
        :data="traceSupplierPersonList"
        border
        style="width: 100%;"
      >
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          align="center"
        >
          <template #default="scope">
            <span>{{ scope.row[item.value] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
    <approval-dialog ref="approvalDialog" @on-success="approvalSuccess" />
  </app-container>
</template>

<style lang="scss" scoped>
.top-info {
  width: 100%;
  height: 50px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background-color: #fff;

  .title {
    width: 75%;
    text-align: center;
  }
}

.info-content {
  margin-top: 10px;
  padding: 30px;
  border-radius: 10px;
  background-color: #fff;

  .content-top {
    display: flex;
    justify-content: space-around;
  }

  .info-dizhi {
    margin-right: 155px;
  }
}

.el-select {
  width: 9vw;
  margin-right: 15px;
}

.info-dizhi .el-input {
  width: 20vw;
}

.input-width .el-input {
  width: 30vw;
}

.info-appendix span {
  margin-right: 25px;
}

.table-top {
  margin-top: 10px;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;

  .table-top-title {
    width: 60vw;
    text-align: center;
  }
}

.dialog-button {
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>