<template>
  <Dialog title="成交商品" v-model="show" width="80%">
    <el-table :data="orderProductList" border stripe>
      <el-table-column prop="productName" label="成交产品" />
      <el-table-column prop="specsName" label="产品规格" />
      <el-table-column prop="signNum" label="成交数量" />
      <el-table-column prop="remark" label="成交备注" />
      <el-table-column label="生产状态" width="160px">
        <template #default="scope">
          <el-switch
            v-model="scope.row.isProduced"
            :active-value="true"
            :inactive-value="false"
            active-text="已生产"
            inactive-text="待生产"
            v-if="checkPermi(['clue:order:update-produce'])"
            size="small"
            @change="handleChangeProdoce(scope.row)"
          />
          <div v-else>{{ scope.row.isProducedDesc }}</div>
        </template>
      </el-table-column>
      <el-table-column label="发货状态" prop="sendState" width="90px">
        <template #default="scope">
          <el-tag :type="scope.row.sendState == '待发货' ? 'danger' : 'success'" size="small">
            {{ scope.row.sendState }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="发货备注" width="100px">
        <template #default="scope">
          <el-popover
            placement="top"
            width="500px"
            trigger="click"
            v-if="scope.row.warehouseName && scope.row.sendRemark"
          >
            <template #reference>
              <el-button type="primary" style="padding: 0" text>点击查看</el-button>
            </template>
            <div v-dompurify-html="scope.row.sendRemark"></div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100px">
        <template #default="scope">
          <el-button
            type="primary"
            class="mr-10px"
            link
            :disabled="scope.row.sendState == '已发货'"
            style="padding: 0; margin-left: 0"
            v-hasPermi="['clue:order:send']"
            @click="handleDelivery(scope.row)"
          >
            发货
          </el-button>
          <el-button
            type="danger"
            link
            style="padding: 0; margin-left: 0"
            v-hasPermi="['clue:order:remove-product']"
            @click="handleRemoveProduct(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </Dialog>
</template>

<script setup>
import * as OrderApi from '@/api/clue/sign'
import { checkPermi } from '@/utils/permission'

const show = ref(false)
const orderProductList = ref([])
function open(orderId) {
  try {
    show.value = true
    getFields()
    OrderApi.getSign(orderId).then((data) => {
      orderProductList.value = data.signProducts || []
    })
  } catch (error) {
    console.log(error)
  }
}

const orderSchema = ref([])
function getFields() {
  getOrderFieldList().then((data) => {
    const list = useCrudSchemas(data).allSchemas.detailSchema
    const arr = []
    list.forEach((it) => {
      if (it.label.includes('日期')) {
        it.dateFormat = 'YYYY-MM-DD'
      }

      if (it.field == 'receivedMoney') {
        checkPermi(['clue:order:return-list']) && arr.push(it)
      } else {
        arr.push(it)
      }
    })
    if (arr.filter((item) => item.span != 2).length % 2 != 0) {
      arr.push({})
    }
    orderSchema.value = [
      ...arr,
      {
        field: 'remark',
        label: '备注',
        span: 2,
        isEditor: true
      }
    ]
  })
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped></style>
