<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-col>
        <el-card class="box-card">
          <el-form>
            <el-form-item>
              <el-table border :data="list">
                <el-table-column align="center" :label="__('编号')" prop="id">
                  <template slot-scope="scope">
                    <span>{{ 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" />
                    </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" />
                    </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="close">{{ __('确定') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { getOrderFormList } 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
      },

      async getDefault(row) {
        const { data } = await getOrderFormList(row)
        let value = data.items[0].form_data
        this.list = JSON.parse(value)
      },
    },
  }
</script>
