<template>
  <el-collapse class="config-extends">
    <el-collapse-item v-if="config">
      <template #title>
        <div class="fx-column fx-1">
          <div class="fx-row fx-bet-cen">
            <span>App扩展配置</span>
            <div class="fx-row fx-end-cen pr20" @click.stop="void 0;">
              <span class="light f-666 mr10">配置项集合运算[satisfyAny]</span>
              <el-radio-group v-model="config.operation" size="mini">
                <el-radio-button v-for="op in extendOperations" :key="op" :name="op" :label="op"></el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="f12 f-999">{{ shortcut }}</div>
        </div>
      </template>
      <el-card shadow="never">
        <template #header>
          <div class="fx-row fx-bet-cen">
            <span>配置项列表[satisfyStoreGetters]</span>
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
          </div>
        </template>
        <dynamic-table :rows="config.items" :columns="itemColumns">
          <template #checkbox="{row, columnDef: col}">
            <el-checkbox v-model="row[col.prop]"></el-checkbox>
          </template>
          <template #switch="{row, columnDef: col}">
            <el-switch v-model="row[col.prop]"></el-switch>
          </template>
          <template #label="{row}">
            {{ row.useOpposite ? row.labelOpposite : row.label }}
          </template>
          <template #select="{row, columnDef: col}">
            <el-select v-model="row[col.prop]" @change="handleItemChange($event, row)">
              <el-option v-for="opt in itemOptions" :key="opt.key" :label="opt.key" :value="opt.key"></el-option>
            </el-select>
          </template>
          <template #input="{row, columnDef: col}">
            <el-input v-model="row[col.prop]" size="mini"></el-input>
          </template>
          <template #delete="{$index, row}">
            <el-button type="text" size="mini" icon="el-icon-delete" class="f-danger"
                       @click="handleDelete($index, row)"></el-button>
          </template>
        </dynamic-table>
      </el-card>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import DynamicTable from "@/components/dynamic-table/index";

export default {
  name: "config-extends",
  components: {DynamicTable},
  props: ['config'],
  data() {
    return {
      // options for extends // TODO: 从API获取itemOptions
      itemOptions: [{
        key: 'isIOS',
        label: 'iOS手机',
        labelOpposite: '非iOS手机'
      }, {
        key: 'isFrontStudent',
        label: '学生',
        labelOpposite: '非学生'
      }, {
        key: 'isSenior',
        label: '高中',
        labelOpposite: '非高中'
      }],
      extendOperations: ['AND', 'OR'],
      // table display define
      itemColumns: [{
        prop: 'enabled',
        label: '启用',
        slotBody: 'checkbox',
        width: '50px'
      }, {
        prop: 'key',
        label: 'store属性名',
        slotBody: 'select',
        minWidth: '150px'
      }, {
        prop: 'useOpposite',
        label: '是否取反',
        slotBody: 'switch'
      }, {
        prop: 'label',
        label: '描述',
        slotBody: 'label'
      }, {
        prop: 'minVersion',
        label: '最小版本',
        slotBody: 'input',
        width: '80px'
      }, {
        prop: 'maxVersion',
        label: '最大版本',
        slotBody: 'input',
        width: '80px'
      }, {
        prop: 'action',
        label: '操作',
        slotBody: 'delete',
        width: '50px'
      }]
    }
  },
  computed: {
    shortcut() {
      if (!this.config?.items?.length) return ''
      const op = ` ${this.config.operation} `
      const cut = this.config.items
        .filter(i => i.enabled)
        .map(i => {
          let cond = i.key
          if (i.useOpposite) cond = '!' + cond
          if (i.minVersion && i.maxVersion) cond += `[${i.minVersion},${i.maxVersion}]`
          else if (i.minVersion) cond += `>=${i.minVersion}`
          else if (i.maxVersion) cond += `<=${i.maxVersion}`
          return cond
        })
      return cut.join(op)
    }
  },
  methods: {
    handleAdd() {
      if (!Array.isArray(this.config?.items)) return
      this.config.items.push({
        enabled: true,
        key: '',
        useOpposite: false,
        label: '',
        labelOpposite: '',
        minVersion: '',
        maxVersion: ''
      })
    },
    async handleDelete(index, row) {
      let msg = '确认删除'
      if (row.key) msg += '`' + row.key + '`'
      await this.$confirm(msg)
      this.config.items.splice(index, 1)
    },
    handleItemChange(key, row) {
      const opt = this.itemOptions.find(i => i.key == key)
      if (opt && row) Object.assign(row, opt)
    }
  }
}
</script>

<style scoped>
.config-extends /deep/ .el-collapse-item__header {
  height: auto;
  line-height: unset;
  padding-top: 8px;
  padding-bottom: 8px;
}
</style>
