<template>
  <div class="padding" style="height: 700px; overflow: auto">
    <div class="back_color padding">
      <a-descriptions :title="baseData2.devName" :column="4" style="width: 80%">
        <a-descriptions-item label="创建人" style="width: 150px">{{
          baseData1.createUserName
        }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ baseData1.createDate }}</a-descriptions-item>
        <a-descriptions-item label="最后修改人" style="width: 150px">{{
          baseData1.modifyUserName
        }}</a-descriptions-item>
        <a-descriptions-item label="修改时间">{{ baseData1.modifyDate }}</a-descriptions-item>
      </a-descriptions>
      <div
        >&nbsp;
        <a-button v-if="repairList.stateOld == '1'" @click="handleEdit">编辑</a-button>

        <a-button style="margin-left: 10px" v-if="repairList.stateOld == '1'" @click="handleDelete"
          >删除</a-button
        >
        <!-- 
                <a-button style="margin-left: 8px;">删除</a-button> -->
      </div>
      <div style="position: absolute; right: 12px; top: 12px">
        <a-image
          src="/src/assets/images/check_tip_pass@2x1.png"
          :preview="false"
          v-if="repairList.stateOld == '1' || repairList.stateOld == '2'"
        />
        <a-image
          src="/src/assets/images/check_tip_pass@2x2.png"
          :preview="false"
          v-if="repairList.stateOld == '4'"
        />
        <a-image
          src="/src/assets/images/check_tip_pass@2x3.png"
          :preview="false"
          v-if="repairList.stateOld == '3'"
        />
      </div>
    </div>
    <div class="back_color padding marginTop">
      <a-descriptions title="基础信息" :column="2">
        <a-descriptions-item label="设备编码">{{ baseData2.devCode }}</a-descriptions-item>
        <a-descriptions-item label="设备名称">{{ baseData2.devName }}</a-descriptions-item>
        <a-descriptions-item label="设备类型">{{ baseData2.devType }}</a-descriptions-item>
        <a-descriptions-item label="所在生产线">{{ baseData2.lineId }}</a-descriptions-item>
        <a-descriptions-item label="所在工位">{{ baseData2.stationId }}</a-descriptions-item>
        <a-descriptions-item label="设备品牌">{{ baseData2.devBrand }}</a-descriptions-item>
        <a-descriptions-item label="供应商">{{ baseData2.devSupplier }}</a-descriptions-item>
        <a-descriptions-item label="设备型号">{{ baseData2.devModel }}</a-descriptions-item>
        <a-descriptions-item label="采购日期">{{ baseData2.buyDate }}</a-descriptions-item>
        <a-descriptions-item label="维保到期">{{ baseData2.maintenanceDate }}</a-descriptions-item>
        <a-descriptions-item label="报废日期">{{ baseData2.scrapDate }}</a-descriptions-item>
        <a-descriptions-item label="负责人">{{ baseData2.devManage }}</a-descriptions-item>
        <a-descriptions-item label="联系电话" :span="2">{{
          baseData2.devPhone
        }}</a-descriptions-item>
        <a-descriptions-item label="设备图片" :span="2">
          <a-image :width="100" v-for="item in baseData2.devFileList" :src="item.fileUrl" />
        </a-descriptions-item>
        <a-descriptions-item label="备注" :span="2">{{ baseData2.remark }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <div class="back_color padding">
      <a-descriptions title="附件">
        <a-descriptions-item>
          <a-upload
            v-model:file-list="baseData2.devFile2List"
            :multiple="true"
            listType="picture-card"
          >
          </a-upload>
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <div class="padding" v-if="rowData.isUpdate || (!rowData.isUpdate && repairList.state > '1')">
      <div
        style="font-weight: bold; font-size: 16px"
        v-if="rowData.flag == '报损' || (!rowData.isUpdate && repairList.state == '4')"
        >报损信息</div
      >
      <div style="font-weight: bold; font-size: 16px" v-else>维修信息</div>
      <a-form ref="formRef" :model="repairList" :rules="rules">
        <a-row>
          <a-col :span="12">
            <a-form-item label="维修状态" name="state" :label-col="{ span: 4 }" required>
              <a-select ref="select" v-model:value="repairList.state" :disabled="!rowData.isUpdate">
                <a-select-option v-if="!rowData.isUpdate" value="1">待维修</a-select-option>
                <a-select-option v-if="!rowData.isUpdate || rowData.flag == '维修'" value="2"
                  >维修中</a-select-option
                >
                <a-select-option v-if="!rowData.isUpdate || rowData.flag == '维修'" value="3"
                  >已维修</a-select-option
                >
                <a-select-option v-if="!rowData.isUpdate || rowData.flag == '报损'" value="4"
                  >已报损</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="开始时间" :label-col="{ span: 4 }">
              <a-date-picker
                :disabled="!rowData.isUpdate"
                v-model:value="repairList.repairStarttime"
                placeholder="请选择时间"
                style="width: 100%"
                :valueFormat="format"
                :format="format"
                :showTime="format === 'YYYY-MM-DD HH:mm:ss'"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="结束时间" :label-col="{ span: 4 }">
              <a-date-picker
                :disabled="!rowData.isUpdate"
                v-model:value="repairList.repairEndtime"
                placeholder="请选择时间"
                style="width: 100%"
                :valueFormat="format"
                :format="format"
                :showTime="format === 'YYYY-MM-DD HH:mm:ss'"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="维修时长" :label-col="{ span: 4 }">
              <a-input
                :disabled="!rowData.isUpdate"
                v-model:value="repairList.repairDuration"
                placeholder="请输入"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item label="维修人" name="repairUser" :label-col="{ span: 4 }" required>
              <SelectUser
                :disabled="!rowData.isUpdate"
                v-model:value="repairList.repairUser"
                suffix="ant-design:setting-outlined"
                placeholder="请选择负责人"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-col :span="24">
          <a-form-item label="故障描述">
            <a-textarea
              :disabled="!rowData.isUpdate"
              v-model:value="repairList.repairErrorRmk"
              placeholder="请输入"
              :auto-size="{ minRows: 2, maxRows: 5 }"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="维修描述">
            <a-textarea
              :disabled="!rowData.isUpdate"
              v-model:value="repairList.repairRemark"
              placeholder="请输入"
              :auto-size="{ minRows: 2, maxRows: 5 }"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="维修图片">
            <Upload
              :disabled="!rowData.isUpdate"
              v-model:value="repairList.repairFile"
              listType="picture-card"
            />
          </a-form-item>
        </a-col>
      </a-form>
    </div>
    <a-divider />
    <div
      style="
        padding: 10px 16px;
        text-align: right;
        background: white;
        border-top: 1px solid rgb(240, 240, 240);
        border-radius: 0px 0px 2px 2px;
        position: absolute;
        bottom: 1px;
        width: 98%;
      "
      v-if="rowData.isUpdate"
    >
      <a-button @click="cancel">取消</a-button>
      <a-button @click="success" type="primary" style="margin-left: 12px">确认</a-button>
    </div>

    <DevRepairModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch, onMounted, createVNode } from 'vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { getMesDevRepair, deleteMesDevRepair } from '/@/api/mes/devrepair';
  import { getMesDevPage } from '/@/api/mes/devdata';
  import SelectUser from '/@/components/Form/src/components/SelectUser.vue';
  import Upload from '/@/components/Form/src/components/Upload.vue';
  import { useModal } from '/@/components/Modal';
  import DevRepairModal from './DevRepairModal.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Modal } from 'ant-design-vue';
  let props = defineProps(['rowData']);
  const { t } = useI18n();
  const rowData: {
    id: string;
    isUpdate: boolean;
    flag: string;
  } = reactive({
    id: '',
    isUpdate: false,
    flag: '',
  });

  const baseData1 = ref<any>({});
  const baseData2 = ref<any>({});

  const devId = ref('');

  const format = ref('YYYY-MM-DD HH:mm:ss');

  const repairList = ref<any>({
    state: '',
    repairStarttime: '',
    repairEndtime: '',
    repairDuration: '',
    repairUser: '',
    repairErrorRmk: '',
    repairRemark: '',
    repairFile: '',
  });
  const rules = {
    state: [{ required: true, message: '请选择状态', trigger: 'change' }],
    repairUser: [{ required: true, message: '请选择维修人', trigger: 'change' }],
  };

  const emit = defineEmits(['cancel', 'success']);
  const formRef = ref();
  const [registerModal, { openModal }] = useModal();
  onMounted(() => {
    rowData.id = props.rowData.id;
    rowData.isUpdate = props.rowData.isUpdate;
    rowData.flag = props.rowData.flag;
    console.log('row===', rowData);
    getDetailData();
  });

  watch(
    () => props.rowData,
    (val) => {
      console.log('监听', val);
      if (val) {
        rowData.id = props.rowData.id;
        rowData.isUpdate = props.rowData.isUpdate;
        rowData.flag = props.rowData.flag;
        getDetailData();
      }
    },
  );
  function handleEdit() {
    openModal(true, {
      id: rowData.id,
      isUpdate: true,
    });
  }

  function handleSuccess() {
    getDetailData();
  }
  function handleDelete(record: Recordable) {
    deleteList([rowData.id]);
  }
  const { notification } = useMessage();
  function deleteList(ids) {
    Modal.confirm({
      title: '提示信息',
      icon: createVNode(ExclamationCircleOutlined),
      content: '是否确认删除？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        deleteMesDevRepair(ids).then((_) => {
          emit('success', null);
          notification.success({
            message: 'Tip',
            description: t('删除成功！'),
          });
        });
      },
      onCancel() {},
    });
  }
  const getDetailData = async () => {
    const data = await getMesDevRepair(rowData.id);
    console.log(data, '上部分信息');
    baseData1.value = data;
    devId.value = data.devId;

    repairList.value.stateOld = data.state;
    repairList.value.state = data.state;
    if (rowData.flag == '维修') {
      repairList.value.state = '2';
    }
    if (rowData.flag == '报损') {
      repairList.value.state = '4';
    }

    repairList.value.repairStarttime = data.repairStarttime;
    repairList.value.repairEndtime = data.repairEndtime;
    repairList.value.repairDuration = data.repairDuration;
    repairList.value.repairUser = data.repairUser;
    repairList.value.repairErrorRmk = data.repairErrorRmk;
    repairList.value.repairRemark = data.repairRemark;
    repairList.value.repairFile = data.repairFile;

    let params = {
      limit: 1,
      size: 10,
      id: devId.value,
      PK: 'id',
    };
    const { list } = await getMesDevPage(params);
    let devFile2List = list[0]?.devFile2List || [];

    devFile2List = devFile2List.map((item) => ({
      name: item.fileName,
      uid: item.id,
      url: item.fileUrl,
    }));
    list[0].devFile2List = devFile2List;

    baseData2.value = list[0];
  };

  const cancel = () => {
    emit('cancel');
  };

  const success = () => {
    formRef.value
      .validate()
      .then(() => {
        repairList.value = { ...repairList.value, id: rowData.id, devId: devId.value };
        emit('success', repairList.value);
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
</script>

<style lang="less" scoped>
  .padding {
    padding: 12px;
  }

  .back_color {
    background-color: hsl(0, 0%, 98%);
    position: relative;
  }

  .marginTop {
    margin-top: 12px;
  }
</style>
