<template>
  <div>

    <el-dialog
      title="问号参数设置"
      :visible="visible"
      width="80%"
      @open='open'
      @close='close'
      :append-to-body="true"
    >
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="key"
          label="变量名"
        >
          <template slot-scope="scope">
            <el-input
              size='mini'
              v-model="scope.row.key"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.type"
              size='mini'
              clearable
            >
              <el-option
                v-for="(option,index) in typeOptions"
                :key="index"
                :value='option.value'
                :label='option.label'
              >
              </el-option>
            </el-select>

          </template>
        </el-table-column>
        <el-table-column
          prop="default"
          label="默认值"
        >
          <template slot-scope="scope">
            <template v-if="scope.row.type=='select'">
              <el-input
                style="width:80px"
                size='mini'
                v-model="scope.row.default"
              ></el-input>
              <el-button
                size="mini"
                @click="setRowOption(scope.row,scope.$index)"
              >设置值</el-button>
            </template>
            <template v-else>
              <el-input
                size='mini'
                v-model="scope.row.default"
              ></el-input>
            </template>

          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
        >
          <template slot-scope="scope">
            <el-input
              type="textarea"
              :rows="1"
              placeholder="请输入内容"
              v-model="scope.row.remark"
            >
            </el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="handle"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size='mini'
              type="primary"
              @click="add"
            >新增</el-button>
            <el-button
              size='mini'
              type="primary"
              @click="deleteRow(scope.$index)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size='mini'
          type="primary"
          @click="add"
        >新增</el-button>
        <el-button
          size='mini'
          type="primary"
          @click="close"
        >取 消</el-button>
        <el-button
          size='mini'
          type="primary"
          @click="submit"
        >确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="设置下拉类型值"
      :visible.sync="visibleSelect"
      width="80%"
      :append-to-body="true"
    >
      <el-table
        :data="tableDataSelect"
        style="width: 100%"
      >
        <el-table-column
          prop="label"
          label="label"
        >
          <template slot-scope="scope">
            <el-input
              size='mini'
              v-model="scope.row.label"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="value"
          label="值"
        >
          <template slot-scope="scope">
            <el-input
              size='mini'
              v-model="scope.row.value"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="handle"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size='mini'
              type="primary"
              @click="addSelect"
            >新增</el-button>
            <el-button
              size='mini'
              type="primary"
              @click="deleteRowSelect(scope.$index)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size='mini'
          type="primary"
          @click="addSelect"
        >新增</el-button>
        <el-button
          size='mini'
          type="primary"
          @click="visibleSelect=false"
        >取 消</el-button>
        <el-button
          size='mini'
          type="primary"
          @click="submitSelect"
        >确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [{}],
      elInfo: {
        el: 'pageParams',
        position: 'pageParams'
      },
      typeOptions: [
        {
          value: 'input',
          label: '1输入框'
        },
        {
          value: 'select',
          label: '2下拉框'
        }
      ],
      visibleSelect: false,
      tableDataSelect: [],
      outRowIndex: 0
    }
  },
  methods: {
    submitSelect() {
      this.tableData[this.outRowIndex].optionList = this.tableDataSelect
      this.visibleSelect = false
    },
    addSelect() {
      this.tableDataSelect.push({})
    },
    deleteRowSelect(index) {
      this.tableDataSelect.splice(index, 1)
    },
    setRowOption(row, index) {
      this.outRowIndex = index
      this.visibleSelect = true
      const optionList = row.optionList
      if (Array.isArray(optionList)) {
        this.tableDataSelect = optionList
      } else {
        this.tableDataSelect = [{}]
      }
    },
    deleteRow(index) {
      this.tableData.splice(index, 1)
    },
    add() {
      this.tableData.push({})
    },
    async open() {
      const data = {
        control_name: 'pageParams',
        return_type: 1
      }
      const res = await this.$API.getPageInfo(data)
      if (!res.length) return
      const json_config = JSON.parse(res[0].json_config)
      this.tableData = json_config
    },
    close() {
      this.$store.dispatch('menuParm/changeMenuDialogVisible', false)
    },
    submit() {
      const data = {
        sControl: 'pageParams',
        sConfig: this.tableData,
        sData: [],
        sQuerySql: '',
        elInfo: this.elInfo,
        is_mock: 0
      }
      this.$API.runSave(data).then(() => {
        this.$message.success('设置成功')
      })
    }
  }
}
</script>