<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="800px"
    @close="close"
  >
    <el-form
      ref="form"
      label-width="100px"
      :model="form"
      :rules="rules"
      size="medium"
    >
      <el-form-item
        :label="__('模板名称')"
        label-width="110px"
        prop="model_name"
      >
        <el-input
          v-model="form.model_name"
          clearable
          :placeholder="__('请输入模板名称')"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-col>
        <el-card class="box-card">
          <el-form>
            <el-form-item>
              <el-button @click="addRow">
                {{ __('添加') }}
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-table border :data="list" @cell-click="tabClick">
                <el-table-column
                  align="center"
                  fixed="left"
                  :label="__('操作')"
                >
                  <template slot-scope="scope">
                    <el-button
                      :disabled="scope.row.model_id != ''"
                      type="text"
                      @click="delRow(scope.$index)"
                    >
                      {{ __('删除') }}
                    </el-button>
                  </template>
                </el-table-column>
                <el-table-column align="center" :label="__('编号')" prop="id">
                  <template slot-scope="scope">
                    <span
                      v-if="
                        scope.$index != tabClickIndex &&
                        scope.column.id != columnId
                      "
                    >
                      <el-input ref="editInput" v-model="scope.row.id" />
                    </span>
                    <span v-else>{{ scope.row.id }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  :label="__('预约采集名称')"
                  prop="key"
                >
                  <template slot-scope="scope">
                    <span
                      v-if="
                        scope.$index === tabClickIndex &&
                        scope.column.id === columnId
                      "
                    >
                      <el-input
                        ref="editInput"
                        v-model="scope.row.key"
                        @blur.stop="inputBlur"
                      />
                    </span>
                    <span v-else>{{ scope.row.key }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  :label="__('预约采集值')"
                  prop="value"
                >
                  <template slot-scope="scope">
                    <span
                      v-if="
                        scope.$index === tabClickIndex &&
                        scope.column.id === columnId
                      "
                    >
                      <el-input
                        ref="editInput"
                        v-model="scope.row.value"
                        @blur.stop="inputBlur"
                      />
                    </span>
                    <span v-else>{{ scope.row.value }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-form>

    <template #footer>
      <el-button @click="close">{{ __('取消') }}</el-button>
      <el-button type="primary" @click="save">{{ __('确定') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { editDrive, getDriveList } from '@/api/base/product/drive'

  export default {
    name: 'SpecManagementEdit',
    components: {},
    data() {
      return {
        driverNum: 1,
        tabClickIndex: null, // 点击的行
        columnId: null, // 点击的列
        list: [],
        dynamicTags: [],
        inputVisible: false,
        inputValue: '',
        data: [],
        form: {
          model_name: undefined,
          spec_order: 0,
          spec_category_id: undefined,
          model_id: '',
        },
        rules: {
          model_name: [
            {
              required: true,
              message: this.__('请输入单行文本规格类别名称'),
              trigger: 'blur',
            },
          ],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      __,
      showEdit(row) {
        console.log(row)
        if (!row) {
          this.title = this.__('添加')
          this.form.model_name = ''
          this.list = []
          this.driverNum = 1
          this.form.model_id = ''
        } else {
          this.title = this.__('编辑')
          this.form.model_name = row.model_name
          this.form.model_id = row.model_id
          this.getDefault(row)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          var s = JSON.stringify(this.list)
          this.form.s = s
          if (valid) {
            const { msg, status } = await editDrive(this.form)
            this.$baseMessage(msg, 'success', false, 'vab-hey-message-success')
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
      addRow() {
        this.list.push({
          id: this.driverNum,
          key: '',
          value: '',
        })
        this.driverNum++
      },
      delRow(index) {
        this.$baseConfirm(this.__('你确定要删除选中项吗'), null, async () => {
          this.list.splice(index, 1)
        })
      },

      async getDefault(row) {
        const { data } = await getDriveList(row)
        this.handleDefaultList(data)
      },
      handleDefaultList(data) {
        let value = data.items[0].model_data
        this.list = JSON.parse(value)
      },

      tabClick(row, column) {
        this.tabClickIndex = this.list.indexOf(row)
        this.columnId = column.id
        // inout 获取焦点
        this.$nextTick(() => {
          if (!this.$refs['editInput']) return
          this.$refs['editInput'].focus()
        })
      },
      // 失去焦点初始化
      async inputBlur() {
        this.tabClickIndex = null
        this.columnId = null
      },
    },
  }
</script>
