<template>
  <schema-table
    ref="table"
    :schema="schema"
  >
    <confirm-dialog
      ref="editDialog"
      :title="dialogTitle"
      @confirm="onSave"
    >
      <div class="c-grid-form u-align-self--center">
        <span class="c-grid-form__label required">名称：</span>
        <el-input
          v-model.trim="currObj.name"
          placeholder="最多50个字符"
          maxlength="50"
          clearable
        />
        <span class="c-grid-form__label required">类型：</span>
        <schema-select
          v-model="currObj.productTypeId"
          placeholder="请选择产品类型"
          :disabled="!isAdd"
          :schema="productTypeSelectSchema"
        />
        <span class="c-grid-form__label required">分辨率：</span>
        <div class="l-flex--row c-grid-form__option">
          <span class="has-padding--h">宽</span>
          <el-input-number
            v-model="currObj.wide"
            class="l-flex__auto"
            :min="1"
            :max="999999"
            :disabled="!isAdd"
            step-strictly
          />
          <span class="has-padding--h">高</span>
          <el-input-number
            v-model="currObj.high"
            class="l-flex__auto"
            :min="1"
            :max="999999"
            :disabled="!isAdd"
            step-strictly
          />
        </div>
        <span class="c-grid-form__label c-grid-form__auto">分割器：</span>
        <div class="l-flex--row c-grid-form__option">
          <el-switch
            v-model="currObj.fpga"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="!isAdd"
          />
        </div>
        <span class="c-grid-form__label">备注：</span>
        <el-input
          v-model.trim="currObj.remark"
          type="textarea"
          maxlength="100"
          :rows="3"
          show-word-limit
        />
      </div>
    </confirm-dialog>
  </schema-table>
</template>

<script>
import {
  getProducts,
  addProduct,
  deleteProduct,
  updateProduct,
  getProductTypes
} from '@/api/device'

export default {
  name: 'Procut',
  props: {
    group: {
      type: Object,
      required: true
    }
  },
  data () {
    const productTypeSelectSchema = {
      condition: { tenant: this.group.path },
      remote: getProductTypes,
      pagination: true,
      value: 'id',
      label: 'name'
    }

    return {
      isAdd: false,
      currObj: {},
      proxy: {
        add: addProduct,
        update: updateProduct,
        del: deleteProduct
      },
      typeOptions: [],
      fetching: false,
      loaded: false,
      productTypeSelectSchema,
      schema: {
        condition: { productTypeId: void 0, tenant: this.group.path },
        list: getProducts,
        buttons: [
          { type: 'add', on: this.onAdd }
        ],
        filters: [
          { key: 'productTypeId', type: 'select', placeholder: '全部类型', ...productTypeSelectSchema }
        ],
        cols: [
          { prop: 'name', label: '产品名称', 'min-width': 60 },
          { prop: 'productTypeName', label: '类型', 'min-width': 60 },
          { prop: 'resolutionRatio', label: '分辨率', 'min-width': 60 },
          { label: '分割器', type: 'tag', width: 100, render ({ fpga }) {
            return {
              type: fpga ? 'success' : 'danger',
              label: fpga ? '有' : '无'
            }
          } },
          { prop: 'remark', label: '备注' },
          { type: 'invoke', render: [
            { label: '编辑', on: this.onEdit },
            { label: '删除', on: this.onDel }
          ] }
        ]
      }
    }
  },
  computed: {
    tenant () {
      return this.group.path
    },
    dialogTitle () {
      return this.isAdd ? `新增产品` : `编辑产品`
    },
    productTypes () {
      return this.isAdd ? this.typeOptions : [{ value: this.currObj.productTypeId, label: this.$currObj.productTypeName }]
    }
  },
  methods: {
    onAdd () {
      this.isAdd = true
      this.productTypeSelectSchema.option = null
      this.currObj = {
        name: '',
        productTypeId: this.$refs.table.getCondition().productTypeId,
        wide: 1920,
        high: 1080,
        fpga: false,
        remark: '',
        tenant: this.tenant
      }
      this.$refs.editDialog.show()
    },
    onEdit (product) {
      this.isAdd = false
      const { id, name, productTypeId, productTypeName, high, wide, fpga, remark } = product
      this.productTypeSelectSchema.option = { value: productTypeId, label: productTypeName }
      this.currObj = { id, name, productTypeId, high, wide, fpga, remark }
      this.$currObj = product
      this.$refs.editDialog.show()
    },
    onSave (done) {
      if (!this.currObj.name) {
        this.$message({
          type: 'warning',
          message: '产品名称不能为空'
        })
        return
      }
      if (!this.currObj.productTypeId) {
        this.$message({
          type: 'warning',
          message: '请选择产品分类'
        })
        return
      }
      this.save(done).then(() => {
        if (this.isAdd) {
          this.$refs.table.resetCondition({ productTypeId: this.currObj.productTypeId })
        } else {
          this.$refs.table.pageTo()
        }
      })
    },
    save (done) {
      if (!this.isAdd && Object.keys(this.currObj).every(key => this.currObj[key] === this.$currObj[key])) {
        done()
        return Promise.reject()
      }
      return (this.isAdd ? addProduct : this.updateProduct)(this.currObj).then(done)
    },
    onDel (product) {
      return deleteProduct(product).then(() => {
        this.$refs.table.decrease(1)
      })
    }
  }
}
</script>
