<script lang="ts" setup name="CustomerList">
import type { Ref } from 'vue'
import type { IReceiptDetail, dictType } from './receiptList-interface'
import userStore from '@/store/modules/user'
import { getDictByCode } from '@/api/system/dict'
import type { ICustomer } from '@/views/customer/customerInfo/customer_interface'
import selectCustomer from '@/views/customer/sample/list/selectCustomer.vue'

const user = userStore()
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // id
const visible = ref(false) // 控制选择委托方对话框显隐
const sampleVisible = ref(false) // 控制选择样品对话框显隐
const customerInfoMap = ref<dictType[]>([]) // 系统字典--航天计量检测技术（江苏）有限公司基本信息
const mesureCategoryList = ref<dictType[]>([]) // 校检类别
const secrecyList = ref<dictType[]>([]) // 保密要求

const ruleFormRef = ref()
// 表单
const dataForm: Ref<IReceiptDetail> = ref({
  orderCode: '', // 委托书编号
  certificationCompany: '', // 证书单位名称
  certificationCompanyFex: '', // 传真
  certificationCompanyEmail: '', // 邮编
  reciever: user.name, // 接收人
  recieverPhone: '', // 接收人电话
  certificationCompanyAddress: '', // 证书单位地址
  customerNo: '', // 委托方代码
  customerId: '', // 委托方id
  customerName: '', // 委托方名称
  fax: '', // 委托方邮编
  postalCode: '', // 委托邮编
  customerAddress: '', // 委托方地址
  deliverer: '', // 送检人
  delivererTel: '', // 送样人联系方式
  orderTime: '', // 委托日期
  requireOverTime: '', // 完成时间
  deliverTime: '', // 交接时间
  measureCategory: '', // 检校类别
  secrecy: '', // 保密要求
  appearance: '', // 样品外观
  relyFile: '', // 依据文件
})

// 获取字典值
function getDict() {
  // 校检类别
  getDictByCode('measureCategory').then((response) => {
    mesureCategoryList.value = response.data
  })
  // 系统字典
  getDictByCode('systemDict').then((response) => {
    const tempMap = response.data.map((item: dictType) => {
      if (item.value === 'address') {
        item.label = '通信地址'
      }
      else if (item.value === 'postalCode') {
        item.label = '邮编'
      }
      else if (item.value === 'tel') {
        item.label = '电话'
      }
      else if (item.value === 'fax') {
        item.label = '传真'
      }
      return item
    })
    // 删除除上述四项的其他基本信息
    tempMap.forEach((item: dictType, index: number) => {
      if (item.value !== 'address' && item.value !== 'postalCode' && item.value !== 'tel' && item.value !== 'fax') {
        tempMap.splice(index, 1)
      }
    })
    customerInfoMap.value = tempMap
  })
  // 保密要求
  getDictByCode('secrecy').then((response) => {
    secrecyList.value = response.data
  })
}
getDict()

// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}

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

// 选好委托方
const confirmCheckout = (val: Array<ICustomer>) => {
  // if (val && val.length) {
  //   list.value = [] // 切换委托方时把样品清单置空
  //   const getValue = val[0]
  //   dataForm.value.customerNo = getValue.customerNo // 委托方代码
  //   dataForm.value.customerId = getValue.id // 委托方id
  //   dataForm.value.customerName = getValue.customerName // 委托方名称
  //   dataForm.value.phone = getValue.phone // 委托方电话
  //   dataForm.value.customerAddress = getValue.fullAddress // 委托方地址
  // }
}

// 点击提交
const submit = () => {}

// 点击选择委托书编号
const selectOrder = () => {

}
</script>

<template>
  <app-container>
    <div id="main">
      <div class="orderNo-title">
        <span>交接单编号：</span>
        <span>11111111</span>
      </div>
      <div class="customer-title">
        <img src="@/assets/images/logo.png" class="img">
        <div class="title">
          航天计量检测技术（江苏）有限公司
        </div>
      </div>
      <detail-page title="设备交接单">
        <template #btns>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="submit">
            提交
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="saveForm(ruleFormRef)">
            保存
          </el-button>
          <el-button type="info" @click="close">
            关闭
          </el-button>
        </template>
        <div id="form">
          <el-form
            ref="ruleFormRef"
            :model="dataForm"
            :label-width="120"
            label-position="right"
          >
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="委托书编号:" prop="orderCode">
                  <el-input
                    v-model="dataForm.orderCode"
                    :placeholder="pageType === 'detail' ? '' : '请选择委托书编号'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  >
                    <template v-if="pageType !== 'detail'" #append>
                      <el-button size="small" @click="selectOrder">
                        选择
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="证书单位名称:" prop="certificationCompany">
                  <el-input
                    v-model="dataForm.certificationCompany"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                    :placeholder="pageType === 'detail' ? '' : '请输入证书单位名称'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="传真:" prop="certificationCompanyFex">
                  <el-input
                    v-model="dataForm.certificationCompanyFex"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                    :placeholder="pageType === 'detail' ? '' : '请输入证书单位传真'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="邮编:" prop="certificationCompanyEmail">
                  <el-input
                    v-model="dataForm.certificationCompanyEmail"
                    :placeholder="pageType === 'detail' ? '' : '请输入证书单位邮编'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="证书单位地址:" prop="certificationCompanyAddress">
                  <el-input
                    v-model="dataForm.certificationCompanyAddress"
                    type="textarea"
                    autosize
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :placeholder="pageType === 'detail' ? '' : '请输入证书单位地址'"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="接收人:" prop="reciever">
                  <el-input
                    v-model="dataForm.reciever"
                    :placeholder="pageType === 'detail' ? '' : '请输入接收人'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="电话/手机:" prop="recieverPhone">
                  <el-input
                    v-model="dataForm.recieverPhone"
                    :placeholder="pageType === 'detail' ? '' : '请输入接收人电话/手机'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="委托方代码:" prop="customerNo">
                  <el-input
                    v-model="dataForm.customerNo"
                    :placeholder="pageType === 'detail' ? '' : '请输入委托方代码'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  >
                    <template v-if="pageType !== 'detail'" #append>
                      <el-button size="small" @click="selectCustomer">
                        选择
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="委托方名称:" prop="customerName">
                  <el-input
                    v-model="dataForm.customerName"
                    :placeholder="pageType === 'detail' ? '' : '请输入委托方名称'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="传真:" prop="fax">
                  <el-input
                    v-model="dataForm.fax"
                    :placeholder="pageType === 'detail' ? '' : '请输入委托方传真'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="邮编:" prop="postalCode">
                  <el-input
                    v-model="dataForm.postalCode"
                    :placeholder="pageType === 'detail' ? '' : '请输入委托方邮编'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="委托方地址:" prop="customerAddress">
                  <el-input
                    v-model="dataForm.customerAddress"
                    type="textarea"
                    autosize
                    :placeholder="pageType === 'detail' ? '' : '请输入委托方地址'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    disabled
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="6">
                <el-form-item label="送检人" prop="deliverer">
                  <el-input
                    v-model="dataForm.deliverer"
                    :placeholder="pageType === 'detail' ? '' : '请输入送检人'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="电话/手机" prop="delivererTel">
                  <el-input
                    v-model="dataForm.delivererTel"
                    :placeholder="pageType === 'detail' ? '' : '请输入送检人电话/手机'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="委托日期:" prop="orderTime">
                  <el-date-picker
                    v-model="dataForm.orderTime"
                    type="date"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    class="full-width-input"
                    :placeholder="pageType === 'detail' ? '' : '请输入委托日期'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="完成时间:" prop="requireOverTime">
                  <el-date-picker
                    v-model="dataForm.requireOverTime"
                    type="datetime"
                    class="full-width-input"
                    :placeholder="pageType === 'detail' ? '' : '请选择完成时间'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="交接时间:" prop="deliverTime">
                  <el-date-picker
                    v-model="dataForm.deliverTime"
                    type="datetime"
                    class="full-width-input"
                    :placeholder="pageType === 'detail' ? '' : '请选择交接时间'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                    :disabled="pageType === 'detail'"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="校检类别:" prop="measureCategory">
                  <el-select
                    v-model="dataForm.measureCategory"
                    :placeholder="pageType === 'detail' ? '' : '请选择校检类别'"
                    :disabled="pageType === 'detail'"
                    class="full-width-input"
                  >
                    <el-option v-for="item of mesureCategoryList" :key="item.value" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="保密要求:" prop="secrecy">
                  <el-select
                    v-model="dataForm.secrecy"
                    :placeholder="pageType === 'detail' ? '' : '请选择保密要求'"
                    :disabled="pageType === 'detail'"
                    class="full-width-input"
                  >
                    <el-option v-for="item of secrecyList" :key="item.value" :label="item.name" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="marg">
              <el-col :span="12">
                <el-form-item label="样品外观:">
                  <el-input
                    v-model="dataForm.appearance"
                    type="textarea"
                    autosize
                    :placeholder="pageType === 'detail' ? '' : '请输入样品外观'"
                    :disabled="pageType === 'detail'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24" class="marg">
              <el-col :span="12">
                <el-form-item label="依据文件:">
                  <el-input
                    v-model="dataForm.relyFile"
                    type="textarea"
                    autosize
                    :placeholder="pageType === 'detail' ? '' : '请输入依据文件'"
                    :disabled="pageType === 'detail'"
                    :class="{ 'detail-input': pageType === 'detail' }"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </detail-page>
      <!-- 表格 -->
      <detail-block title="样品清单">
        <template #btns>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="multiAdd">
            从样品库中添加
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="primary" @click="addRow">
            增加行
          </el-button>
          <el-button v-if="pageType !== 'detail'" type="info" @click="delRow">
            删除行
          </el-button>
        </template>
        <!-- <el-table
          :data="list"
          border
          style="width: 100%;"
          max-height="600"
          @selection-change="handleSelectionChange"
        >
          <el-table-column v-if="pageType !== 'detail'" type="selection" width="38" />
          <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"
            :width="item.width"
            show-overflow-tooltip
            align="center"
          >
            <template #header>
              <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
            </template>
            <template v-if="(pageType === 'add' || pageType === 'edit')" #default="scope">
              <el-input
                v-if="item.value !== 'powerVoltage' && scope.row.isEdit"
                v-model="scope.row[item.value]"
                :placeholder="item.value === 'sampleNo' ? '系统自动生成' : `请输入${item.text}`"
                :disabled="item.disabled"
                class="input"
              />
              <span v-if="item.value !== 'powerVoltage' && !scope.row.isEdit">{{ scope.row[item.value] }}</span>
              <el-select v-if="item.value === 'powerVoltage' && scope.row.isEdit" v-model="scope.row[item.value]" :placeholder="`请选择${item.text}`">
                <el-option
                  v-for="i in powerVoltageMap"
                  :key="i.value"
                  :label="i.name"
                  :value="i.value"
                />
              </el-select>
              <span v-if="item.value === 'powerVoltage' && !scope.row.isEdit">{{ scope.row[item.value] }}</span>
            </template>
          </el-table-column>
        </el-table> -->
      </detail-block>

      <!-- 公司信息 -->
      <div class="customer-info">
        <div v-for="item in customerInfoMap" :key="item.value" class="content">
          <div v-if="item.value === 'address' || item.value === 'postalCode' || item.value === 'tel' || item.value === 'fax'" class="title">
            {{ item.label }}:
          </div>
          <div v-if="item.value === 'address' || item.value === 'postalCode' || item.value === 'tel' || item.value === 'fax'" class="value">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <!-- 选择委托方组件 -->
    <!-- <select-customer v-model:visible="visible" @confirmCheckout="confirmCheckout" @changeVisible="changeVisible" /> -->
    <!-- 选择样品组件 -->
    <!-- <select-sample v-model:visible="sampleVisible" :customer-no="dataForm.customerNo" @clickConfirmSample="clickConfirmSample" @changeVisible="changeSampleVisible" /> -->
  </app-container>
</template>

<style lang="scss" scoped>
.customer-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  margin: 24px 0;

  .img {
    width: 32px;
    height: 32px;
    margin-right: 14px;
    vertical-align: middle;
  }
}

.customer-info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  margin: 40px 0;

  .content {
    display: flex;
    font-size: 14px;

    .title {
      font-weight: 600;
      color: #000;
    }

    .value {
      margin-left: 10px;
    }
  }
}
</style>