<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="demo-tabs" :before-leave="beforeTabLeave">
      <el-tab-pane v-for="tab in tabsList" :key="tab.name" :label="tab.label" :name="tab.name">
        <el-row>
          <el-form :model="queryParams" :inline="true">
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="queryParams.title"
                placeholder="请输入标题"
                clearable
                style="width: 240px"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格数据 -->
          <el-table v-loading="loading" :data="tableList">
            <el-table-column label="商品图片" align="center" prop="mainUrls" width="150">
              <template #default="scope">
                <el-image
                  v-if="scope.row.mainUrls"
                  :src="scope.row.mainUrls"
                  class="logo-image"
                  fit="cover"
                >
                  <template #error>
                    <div class="image-slot">
                      <el-icon><Picture /></el-icon>
                    </div>
                  </template>
                </el-image>
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column label="标题" prop="title" :show-overflow-tooltip="true" />
            <el-table-column
              label="短标题"
              prop="shortTitle"
              :show-overflow-tooltip="true"
              width="150"
            />

            <el-table-column label="状态" prop="status" align="left">
              <template #default="scope">
                <dict-tag :options="product_launch_status" :value="scope.row.status" />
              </template>
            </el-table-column>

            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="200"
              fixed="right"
            >
              <template #default="scope">
                <div class="btnCon">
                  <el-button text size="small" type="primary" @click="handleEdit(scope.row)"
                    >编辑</el-button
                  >

                  <!-- <el-button text size="small" type="danger">删除</el-button> -->
                  <el-dropdown placement="left" style="margin-left: 10px">
                    <el-button type="primary" link size="small">
                      更多 <el-icon><ArrowDown /></el-icon
                    ></el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item
                          v-if="scope.row.status == 'DSH' || scope.row.status == 'SB'"
                          @click="changeStatus(scope.row, 'SH')"
                          >审核</el-dropdown-item
                        >
                        <el-dropdown-item
                          v-if="scope.row.status == 'XJ'"
                          @click="changeStatus(scope.row, 'SJ')"
                          >上架</el-dropdown-item
                        >
                        <el-dropdown-item
                          v-if="scope.row.status == 'ZS' || scope.row.status == 'YS'"
                          @click="changeStatus(scope.row, 'XJ')"
                          >下架</el-dropdown-item
                        >
                        <el-dropdown-item @click="handleEdit(scope.row, 'copy')"
                          >复制</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-col style="display: flex; justify-content: flex-end">
            <pagination
              v-show="total >= 0"
              :total="total"
              v-model:page="queryParams.pageNo"
              v-model:limit="queryParams.pageSize"
              @pagination="getTableList"
            />
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="审核" v-model="showReview" width="500px" append-to-body>
      <el-form :model="reviewForm" label-width="68px">
        <el-form-item label="审核状态" prop="approvalStatus">
          <el-radio-group v-model="reviewForm.approvalStatus">
            <el-radio value="TG" size="large">通过</el-radio>
            <el-radio value="WTG" size="large">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="reviewForm.approvalStatus == 'WTG'" label="备注">
          <el-input
            v-model="reviewForm.approvalRemark"
            placeholder="请输入备注"
            clearable
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirmReview">提交审核</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="InsuranceProduct">
import { goodsList, changeProductStatus, productApproval } from '@/api/product/index'
import { ref, watch } from 'vue'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
const { product_launch_status } = proxy.useDict('product_launch_status')
const activeName = ref('all')
const total = ref(0)
const loading = ref(false)
const tableList = ref([])
const showReview = ref(false)
const currentRow = ref({})
const data = reactive({
  queryParams: {},
  allQueryParams: {
    pageNo: 1,
    pageSize: 10,
    selectType: null
  },
  saleQueryParams: {
    pageNo: 1,
    pageSize: 10,
    selectType: 1
  },
  delistQueryParams: {
    pageNo: 1,
    pageSize: 10,
    selectType: 2
  },
  reviewForm: {},
  rules: {
    approvalStatus: [{ required: true, message: '审核状态不能为空', trigger: 'blur' }]
  }
})

const { queryParams, allQueryParams, saleQueryParams, delistQueryParams, reviewForm } = toRefs(data)
const tabsList = ref([
  {
    label: '全部',
    name: 'all',
    key: 'all',
    id: 1
  },
  {
    label: '销售中',
    name: 'sale',
    id: 2,
    key: 'sale'
  },
  {
    label: '已下架',
    name: 'delist',
    id: 3,
    key: 'delist'
  }
])
// Tab切换前的验证
const beforeTabLeave = (activeTabName, oldTabName) => {
  return true
}
const handleEdit = (row, type) => {
  let obj = {
    productBizId: row.productBizId,
    productLaunchBizId: row.productLaunchBizId
  }
  if (type && type == 'copy') {
    obj.source = 'copy'
  }
  router.push({
    path: '/merchandise/putOnSale',
    query: {
      ...obj
    }
  })
}
// 提交审核
const confirmReview = () => {
  if (!reviewForm.value.approvalStatus) {
    proxy.$modal.msgError('请选择审核状态')
    return
  }
  productApproval({
    productLaunchBizId: currentRow.value.productLaunchBizId,
    ...reviewForm.value
  }).then(response => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess(`已提交审核`)
      getTableList()
      showReview.value = false
      reviewForm.value = {}
    } else {
      proxy.$modal.msgError(response.msg)
    }
  })
}
// 上下架
const changeStatus = (row, type) => {
  console.log('type', type)

  currentRow.value = { ...row }
  if (type == 'SH') {
    showReview.value = true
  } else if (type == 'SJ' || type == 'XJ') {
    proxy.$modal
      .confirm(`是否确认${type == 'SJ' ? '上架' : '下架'}${row.title}?`)
      .then(function () {
        changeProductStatus({
          productLaunchBizId: row.productLaunchBizId,
          status: type
        }).then(response => {
          if (response.code === 200) {
            proxy.$modal.msgSuccess(`${type == 'SJ' ? '上架' : '下架'}成功`)
            getTableList()
          } else {
            proxy.$modal.msgError(response.msg)
          }
        })
      })
      .catch(() => {})
  }
}
const handleQuery = () => {
  let obj = {
    pageNo: 1,
    pageSize: 10
  }
  allQueryParams.value = { ...allQueryParams.value, ...obj }
  saleQueryParams.value = { ...saleQueryParams.value, ...obj }
  delistQueryParams.value = { ...delistQueryParams.value, ...obj }
  if (activeName.value == 'all') {
    queryParams.value = allQueryParams.value
  } else if (activeName.value == 'sale') {
    queryParams.value = saleQueryParams.value
  } else if (activeName.value == 'delist') {
    queryParams.value = delistQueryParams.value
  }
  getTableList()
}
const resetQuery = () => {
  let obj = {
    pageNo: 1,
    pageSize: 10,
    title: null
  }
  allQueryParams.value = { ...allQueryParams.value, ...obj }
  saleQueryParams.value = { ...saleQueryParams.value, ...obj }
  delistQueryParams.value = { ...delistQueryParams.value, ...obj }
  if (activeName.value == 'all') {
    queryParams.value = allQueryParams.value
  } else if (activeName.value == 'sale') {
    queryParams.value = saleQueryParams.value
  } else if (activeName.value == 'delist') {
    queryParams.value = delistQueryParams.value
  }
  getTableList()
}
const getTableList = () => {
  loading.value = true
  goodsList(queryParams.value).then(response => {
    if (response.code === 200) {
      tableList.value = response.data.records
      total.value = response.data.total
      loading.value = false
      tableList.value.forEach(item => {
        if (item.mainUrls) {
          item.mainUrls = item.mainUrls.split(';')[0]
        }
      })
    } else {
      proxy.$modal.msgError(response.msg)
    }
  })
}
watch(
  () => activeName.value,
  newVal => {
    if (newVal == 'all') {
      queryParams.value = allQueryParams.value
    } else if (newVal == 'sale') {
      queryParams.value = saleQueryParams.value
    } else if (newVal == 'delist') {
      queryParams.value = delistQueryParams.value
    }
    getTableList()
  }
)
queryParams.value = allQueryParams.value
getTableList()
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  box-sizing: border-box;
}
.logo-image {
  width: 70px;
  height: 70px;
  border-radius: 4px;
  object-fit: cover;
}
.btnCon {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
