<template>
  <ElDialog
    v-model="visible"
    :title="title"
    width="1400px"
    top="6vh"
    :close-on-click-modal="false"
  >
    <div v-if="row" class="detail-info">
      <div class="review-image">
        <ul class="color-image">
          <li
            v-for="(val, index) in imageList"
            :key="index"
            class="color-image-item"
            @mouseover="setMainImage(val.imagePath)"
          >
            <!-- <button class="remove" type="button">
              <i class="el-icon-close"></i>
            </button> -->
            <img loading="lazy" :src="val.imagePath" alt="" />
          </li>
          <!-- <li>
            <div class="color-image-item" @click="upload">
              <el-icon><Plus /></el-icon>
            </div>
          </li> -->
        </ul>
        <div class="main-image">
          <img :src="mainImageUrl || row?.mainImage" />
        </div>
      </div>
      <div class="review-from">
        <div>
          <ElForm
            ref="reviewFormRef"
            :model="reviewForm"
            label-width="120px"
            inline
          >
            <ElFormItem label="编码" prop="sku">
              <ElInput
                v-model="reviewForm.sku"
                disabled
                placeholder="编码"
                style="width: 200px"
              />
            </ElFormItem>
            <ElFormItem label="负责人" prop="personInChargeId">
              <ElSelect
                v-model="reviewForm.personInChargeId"
                style="width: 200px"
                clearable
                disabled
                placeholder="请选择负责人"
              >
                <ElOption
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.account"
                  :value="item.id"
                ></ElOption>
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="紧急程度" prop="urgentLevel">
              <el-radio-group
                v-model="reviewForm.urgentLevel"
                style="width: 200px"
              >
                <el-radio
                  v-for="(item, index) in emergencyLevel"
                  :key="index"
                  disabled
                  :label="item.value"
                >
                  <svg
                    t="1627697200171"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="629"
                    width="18"
                    height="18"
                  >
                    <path
                      :fill="setColor(index)"
                      d="M444.970667 850.090667l151.978666-64.512a85.290667 85.290667 0 0 1-151.978666 64.512z m231.765333-760.746667c89.002667 48.597333 155.818667 111.018667 199.765333 187.178667 43.946667 76.117333 64.64 165.205333 62.250667 266.581333a32 32 0 0 1-64-1.536c2.133333-90.069333-15.872-167.552-53.674667-233.045333-37.802667-65.536-95.957333-119.850667-175.018666-163.029334a32 32 0 1 1 30.72-56.192z m-390.4 188.629333a248.490667 248.490667 0 0 1 324.266667 117.162667l4.181333 8.917333 54.954667 123.392 72.448 62.72c3.968 3.413333 7.381333 7.381333 11.349333 13.824l2.517333 4.906667a53.333333 53.333333 0 0 1-27.178666 70.357333L288.213333 874.24A53.333333 53.333333 0 0 1 213.333333 825.472l-0.042666-99.968-52.992-119.082667A248.405333 248.405333 0 0 1 286.293333 277.973333z m380.288-34.986666c41.258667 22.442667 74.325333 55.210667 98.816 97.621333 24.490667 42.453333 36.309333 87.466667 35.157333 134.442667a32 32 0 1 1-64-1.578667c0.853333-35.029333-7.893333-68.437333-26.581333-100.864-18.688-32.384-43.264-56.661333-74.026667-73.472a32 32 0 0 1 30.634667-56.192z"
                      p-id="630"
                    ></path>
                  </svg>
                </el-radio>
              </el-radio-group>
            </ElFormItem>
            <ElFormItem label="期望完成日期" prop="expectCompleteTime">
              <ElDatePicker
                v-model="reviewForm.expectCompleteTime"
                disabled
                placeholder="期望完成日期"
                style="width: 200px"
              ></ElDatePicker>
            </ElFormItem>
            <ElFormItem
              label="承诺完成日期"
              prop="promiseCompleteTime"
              :rules="[
                {
                  required: true,
                  message: '请选择承诺完成日期',
                },
              ]"
            >
              <ElDatePicker
                v-model="reviewForm.promiseCompleteTime"
                style="width: 200px"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="承诺完成日期"
              ></ElDatePicker>
            </ElFormItem>
          </ElForm>
        </div>
        <p v-dompurify-html="reviewForm.requirement" class="requirement"></p>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="large" @click="visible = false">取消</el-button>
        <el-button size="large" type="primary" @click="saveReview(true)"
          >保存
        </el-button>
      </div>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import {
  TypesettingListData,
  EmergencyLevel,
  ImageListData,
} from '@/types/api/typesetting'
import {
  computed,
  defineEmits,
  defineProps,
  PropType,
  ref,
  onMounted,
  watch,
} from 'vue'
import { saveTypesettingReviewApi } from '@/api/typesetting'
import { getUserListApi } from '@/api/common'
import { userData } from '@/types/api/user'
// import { Plus } from '@element-plus/icons-vue'
import { showConfirm } from '@/utils/ui'
const props = defineProps({
  row: {
    type: Object as PropType<TypesettingListData>,
    default: () => {},
  },
  modelValue: Boolean,
  title: String,
})
const emit = defineEmits(['update:modelValue', 'update:modelValue', 'refresh'])
const visible = computed({
  get() {
    return props.modelValue
  },
  set(val: boolean) {
    emit('update:modelValue', val)
  },
})
watch(visible, (val) => {
  if (val) {
    mainImageUrl.value = reviewForm.value?.mainImage || ''
  }
})
const reviewForm = computed({
  get() {
    return props.row
  },
  set(val: TypesettingListData) {
    emit('update:modelValue', val)
  },
})
const mainImageUrl = ref('')
const emergencyLevel = ref<EmergencyLevel[]>([])
emergencyLevel.value = [
  {
    name: 'VERY_URGENT',
    desc: '非常紧急',
    value: 3,
  },
  {
    name: 'URGENT',
    desc: '紧急',
    value: 2,
  },
  {
    name: 'GENERAL',
    desc: '一般',
    value: 1,
  },
]
const setColor = (index: number) => {
  if (index == 0) {
    return '#F54D66'
  }

  if (index == 1) {
    return '#FDC834'
  }
  if (index == 2) {
    return '#5DE088'
  }
}
const reviewFormRef = ref()
const saveReview = async (bol: boolean) => {
  if (!bol) {
    try {
      await showConfirm('是否确认驳回', {
        type: 'warning',
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      })
    } catch {
      return
    }
  }
  try {
    await reviewFormRef.value.validate()
  } catch {
    return
  }
  const personInChargeName = userList.value.find(
    (item) => item.id === reviewForm.value.personInChargeId,
  )?.account
  try {
    const res = await saveTypesettingReviewApi({
      ...reviewForm.value,
      personInChargeName,
      confirm: bol,
    })
    ElMessage.success(res.message)
    emit('update:modelValue', false)
    emit('refresh')
  } catch (e) {
    console.error(e)
  }
}
const refreshForm = () => {
  reviewFormRef.value.resetFields()
}
const userList = ref<userData[]>([])
const getUserList = async () => {
  try {
    const res = await getUserListApi()
    userList.value = res.data
  } catch (e) {
    console.error(e)
  }
}
const setMainImage = (url: string | undefined) => {
  mainImageUrl.value = url || ''
}
onMounted(() => {
  getUserList()
})
defineExpose({
  refreshForm,
})
const imageList = computed<ImageListData[]>(() => {
  if (!props.row) return []
  return props.row?.imageList ?? []
})
// const upload = () => {}
</script>

<style lang="scss" scoped>
ul,
li {
  margin: 0;
  padding: 0;
}
.color-image-item {
  width: 58px;
  height: 58px;
  border: 1px solid #ddd;
  cursor: pointer;
  position: relative;
  margin: 5px auto;
  img {
    width: 100%;
    height: 100%;
  }
}
.detail-info {
  display: flex;
  gap: 10px;
  height: 600px;
}
.review-image {
  width: 40%;
  display: flex;
  gap: 10px;
}
.review-from {
  width: 60%;
  display: flex;
  flex-direction: column;
}

.requirement {
  border: 1px solid #ddd;
  overflow: auto;
  flex: 1;
  margin: 0;
}

.main-image {
  border: 1px solid #ddd;
  flex: 1;
  display: flex;
  align-items: center;
  img {
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}
.dialog-footer {
  text-align: center;
}
</style>
