<template>
  <template-page
    ref="pageRef"
    :get-list="getList"
    :export-list="exportList"
    :column-parsing="columnParsing"
    :more-parameters="moreParameters"
    :operation="operation()"
    :operation-column-width="240"
    :replace-or-not-map="false"
    :optionsEvensGroup="optionsEvensGroup"
    :tableAttributes="tableAttributes"
    :tableEvents="tableEvents"
  >
    <div class="cartographer_big">
      <el-dialog title="编辑" width="100%" :modal="false" :visible.sync="visible" :before-close="handleClose">
        <Form v-if="visible" :detail-id="detailId" @back="handleClose" />
      </el-dialog>
    </div>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import Form from './form.vue'
import {
  esGoodsList,
  esGoodsListExport,
  esGoodsDel,
  esGoodsTop,
  esGoodsBatchUpdateStatus
} from '@/api/commodityManagement'
export default {
  components: { TemplatePage, Form },
  mixins: [import_mixin, operation_mixin],
  props: {},
  data() {
    return {
      // 事件组合
      optionsEvensGroup: [
        [
          [
            this.optionsEvensAuth('batchListing', {
              click: () => {
                if (this.recordSelected.length === 0) {
                  this.$message.warning('请勾选')
                  return
                }
                esGoodsBatchUpdateStatus({
                  ids: this.recordSelected.map(item => item.id).join(','),
                  status: 'ON'
                }).then(res => {
                  this.$message({ type: 'success', message: `设置成功!` })
                  this.$refs.pageRef.refreshList()
                })
              }
            })
          ],
          [
            this.optionsEvensAuth('batchDelist', {
              click: () => {
                if (this.recordSelected.length === 0) {
                  this.$message.warning('请勾选')
                  return
                }
                esGoodsBatchUpdateStatus({
                  ids: this.recordSelected.map(item => item.id).join(','),
                  status: 'OFF'
                }).then(res => {
                  this.$message({ type: 'success', message: `设置成功!` })
                  this.$refs.pageRef.refreshList()
                })
              }
            })
          ]
        ]
      ],
      visible: false,
      detailId: '',
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true,
        selectable: this.selectable
      },
      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: []
    }
  },
  computed: {
    moreParameters() {
      return [
        {
          name: '状态',
          key: 'orderType',
          value: '',
          conditions: [
            {
              label: `全部`,
              value: ''
            },
            {
              label: `上架`,
              value: 'ON'
            },
            {
              label: `下架`,
              value: 'OFF'
            },
            {
              label: `已卖出`,
              value: 'SALE'
            }
          ]
        }
      ]
    }
  },
  methods: {
    selectable(row, index) {
      return ['ON', 'OFF'].includes(
        Object.entries(row.selectMapData.status).find(([key, val]) => val == row.status)?.[0]
      )
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    // 列表请求函数
    getList(p, cb) {
      if (p.orderType) {
        p.params.push({ param: 'a.status', compare: '=', value: p.orderType })
      }
      cb && cb(p)
      return esGoodsList(p)
    },
    // 列表导出函数
    exportList: esGoodsListExport,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      if (item.jname === 'imgUrl') {
        defaultData.render = (h, { row, index, column }) => {
          return (
            <div style="padding:0 6px;cursor: pointer;">
              {row.imgUrl
                ? row.imgUrl
                    .split(',')
                    .map(url => (
                      <el-image
                        src={this.$showImgUrl(url)}
                        preview-src-list={[this.$showImgUrl(url)]}
                        fit="fit"
                        style="width:80px;height:80px;"
                      />
                    ))
                : null}
            </div>
          )
        }
      }
      return defaultData
    },
    operation() {
      return this.operationBtn({
        edit: {
          click: ({ row, index, column }) => {
            this.detailId = row.id
            this.visible = true
          }
        },
        del: {
          prompt: '是否确定删除？',
          conditions: ({ row, index, column }) => {
            return row.status == 'SALE'
          },
          click: ({ row, index, column }) => {
            esGoodsDel({ id: row.id }).then(res => {
              this.$message({ type: 'success', message: `删除成功!` })
              this.$refs.pageRef.refreshList()
            })
          }
        },
        topFix: {
          prompt: '是否确定置顶？',
          conditions: ({ row, index, column }) => {
            return !row.isTop
          },
          click: ({ row, index, column }) => {
            esGoodsTop({ id: row.id, isTop: true }).then(res => {
              this.$message({ type: 'success', message: `设置成功!` })
              this.$refs.pageRef.refreshList()
            })
          }
        },
        unTopFix: {
          prompt: '是否确定取消置顶？',
          conditions: ({ row, index, column }) => {
            return row.isTop
          },
          click: ({ row, index, column }) => {
            esGoodsTop({ id: row.id, isTop: false }).then(res => {
              this.$message({ type: 'success', message: `设置成功!` })
              this.$refs.pageRef.refreshList()
            })
          }
        }
      })
    },
    handleClose(obj) {
      this.detailId = ''
      this.visible = false
      this.$refs.pageRef.refreshList()
      if (obj && obj.detailId) {
        this.$nextTick(() => {
          this.detailId = obj.detailId
          this.visible = true
        })
      }
    }
  }
}
</script>

<style scoped></style>
