<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item"/>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreateAdd">
        增加部件参数值
      </el-button>
      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="getPartParameter"/>
        </el-tooltip>
      </div>
    </div>

    <el-table
      :data="tableData"
      v-loading="listLoading"
      border
      default-expand-all
      row-key="id"
      :tree-props="{child: 'child', haschild: 'child'}">
      <el-table-column prop="itemName" label="参数值名称">
      </el-table-column>
      <el-table-column prop="itemValue" label="参数值">
      </el-table-column>
      <el-table-column prop="sortNum" label="排序">
        <template slot-scope="{row}">
          <template v-if="row.isEdit == 1">
            <el-input type="number" v-model="row.sortNum"></el-input>
          </template>
          <span v-else>{{ row.sortNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-if="row.parentId == 0" @click="addValue(row)" class="operateBtn" type="primary" size="mini">
            增加选项
          </el-button>
          <el-button v-if="row.parentId != 0 && row.isEdit ==0" class="operateBtn" @click="row.isEdit = 1" size="mini">
            编辑
          </el-button>
          <el-button
            type="primary"
            v-if="row.parentId != 0 && row.isEdit ==1"
            class="operateBtn"
            @click="editSave(row)"
            size="mini">
            保存
          </el-button>
          <el-button
            v-if="row.parentId != 0 && row.isDefaultValue ==0"
            class="operateBtn"
            @click="setDefault(row)"
            type="warning"
            size="mini">
            默认
          </el-button>
          <el-button @click="deleteRow(row)" type="danger" size="mini">
            删除
          </el-button>

        </template>
      </el-table-column>

    </el-table>
    <pagination
      v-show="listData.total>0"
      :total="listData.total"
      :page.sync="listData.page"
      :limit.sync="listData.pageSize"
      @pagination="getPartParameter"/>

    <el-dialog
      :title="dialogTitle"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="800px">
      <el-form label-width="100px" label-position="right">
        <el-row :gutter="20">

          <el-col :span="12">
            <el-form-item label="参数值名称">
              <el-input v-model="form.itemName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参数值" v-if="dialogStatus==1">
              <el-input v-model="form.itemValue"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="dialogStatus==2">
            <el-form-item label="项目值">
              <el-input v-model="form.itemValue"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序">
              <el-input v-model="form.sortNum" type="number"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBtn()" :disabled="clickLoading">确 定</el-button>
      </div>
    </el-dialog>
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
    <el-dialog
      :title="dialogTitle"
      :close-on-click-modal="false"
      :visible.sync="paperInfoDialogVisible"
      width="900px">
<!--      <BasePaperInfo :is-choose="true" @choosePaper='choosePaper'></BasePaperInfo>-->
      <paper-quote :is-choose="true" @choosePaper='choosePaper'></paper-quote>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPartParameterItemList,
  addPartParameterItem,
  getPartParameterInfoById,
  updatePartParameter,
} from '@/api/productFile/partParameterChild'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'
import BasePaperInfo from '@/views/baseInfo/paper/basePaperInfo'
import PaperQuote from "@/views/baseInfo/paperQuote/paperQuote";

const form = {
  idProduct: '',
  idPartInfo: '',
  idParameter: '',
  itemName: '',
  itemValue: '',
  itemControl: '',
  sortNum: ''
}

export default {
  components: {
    PaperQuote,
    BasePaperInfo,
    Cancledialog
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      clickLoading: false,
      idProduct: '',
      idPartInfo: '',
      idParameter: '',
      dialogStatus: 1, // 1增加，2修改
      dialogTitle: '',
      dialogVisible: false,
      paperInfoDialogVisible: false,
      search: {
        keyWord: ''
      },
      form: Object.assign({}, form),
      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      },

      options: [],
      cssOptions: [],
      kindOptions: [
        {
          label: '输入',
          value: 0
        },
        {
          label: '下拉自定义',
          value: 2
        },
        {
          label: '下拉',
          value: 3
        },
        {
          label: '弹窗',
          value: 4
        }
      ],
      enterTypeOptions: [

        {
          label: '选项',
          value: 1
        },
        {
          label: '自定义',
          value: 2
        }
      ],

      confirmdialog: false,
      listLoading: false,
      tableData: [],
      menuId: ''
    }
  },
  mounted() {
    this.idProduct = this.$route.query.idProduct
    this.idPartInfo = this.$route.query.idPartInfo
    this.idParameter = this.$route.query.idParameter
    this.productName = this.$route.query.productName
    this.partName = this.$route.query.partName
    this.parameterName = this.$route.query.parameterName
    this.fieldType = this.$route.query.fieldType
    this.getPartParameter()// 获取部件参数列表
    this.tempRoute = Object.assign({}, this.$route)
    this.setTagsViewTitle()
  },
  methods: {
    // 设置标签名称
    setTagsViewTitle() {
      // console.log("tempRoute2",this.tempRoute);
      const route = Object.assign({}, this.tempRoute, {title: `${this.productName}-${this.partName}-${this.parameterName}`})
      // console.log("route",route)
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    // 获取列表
    getPartParameter() {
      const _that = this
      _that.listLoading = true

      var data = {
        'idProduct': _that.idProduct,
        'idPartInfo': _that.idPartInfo,
        'idParameter': _that.idParameter
      }

      // console.log(data)
      getPartParameterItemList(data).then(response => {
        console.log(response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        console.log('tableData', _that.tableData)
        _that.listData.total = response.total
        _that.listLoading = false
      }).catch(err => {
        console.log(err)
        _that.$message.error(err)
        _that.listLoading = false
      })
    },

    // 增加部件参数档案
    handleCreateAdd() {
      const _that = this
      _that.clickLoading = false
      _that.form = Object.assign({}, form)
      _that.form.idProduct = _that.idProduct
      _that.form.idPartInfo = _that.idPartInfo
      _that.form.idParameter = _that.idParameter
      _that.dialogTitle = '增加部件参数值'
      _that.dialogStatus = '1'
      if (_that.fieldType == 4) {
        _that.paperInfoDialogVisible = true
      } else {
        _that.dialogVisible = true
      }
    },
    // 刷新变革
    tableRefresh() {
      // 刷新变革
      this.getPartParameter()
    },
    addValue(row) {
      const _that = this
      _that.form = Object.assign({}, form),
        _that.form.idProduct = _that.idProduct
      _that.form.idPartInfo = _that.idPartInfo
      // _that.form.idParameter = row.id;
      _that.form.parentId = row.id
      _that.dialogTitle = '增加参数值'
      _that.dialogVisible = true
      _that.dialogStatus = '2'
    },
    // 增加部件参数档案
    addBtn() {
      const _that = this
      _that.clickLoading = true
      var printerTypeInfo = JSON.stringify(_that.form)
      var data = {
        'partParameter': printerTypeInfo
      }
      // console.log(data);
      // return

      addPartParameterItem(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          _that.dialogVisible = false
          _that.$message({
            message: '增加成功',
            type: 'success'
          })
          _that.clickLoading = false
          _that.tableRefresh()
        } else {
          _that.clickLoading = false
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
        _that.clickLoading = false
        _that.dialogVisible = true
      })
    },

    // 唤起修改
    handleUpdate(row) {
      console.log(row)
      const _that = this
      _that.form = Object.assign({}, form),
        _that.form.idProduct = _that.idProduct
      _that.form.idPartInfo = _that.idPartInfo
      _that.dialogTitle = '修改部件参数档案信息'
      _that.dialogVisible = true
      _that.dialogStatus = '2'

      var data = {
        idPartParameter: row.id,
        idProduct: row.idProduct,
        idPartInfo: row.idPartInfo,
        parameterName: row.parameterName,
        defaultValue: row.defaultValue
      }

      console.log(data)
      getPartParameterInfoById(data).then(res => {
        console.log(res)
        const data = res.data

        _that.form = {
          id: data.id,
          idProduct: data.idProduct,
          idPartInfo: data.idPartInfo,
          idParameter: data.idParameter,
          parameterName: data.parameterName,
          defaultValue: data.defaultValue // 默认
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 修改部件参数档案
    editSave(row) {
      const _that = this
      row.isEdit = 0
      var printerTypeInfo = JSON.stringify(row)
      var data = {
        'partParameter': printerTypeInfo
      }
      // console.log(row);
      // return;
      updatePartParameter(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          _that.$message({
            message: '修改成功',
            type: 'success'
          })
          _that.tableRefresh()
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    // 删除部件参数
    deleteRow(row) {
      const _that = this
      var partParameter = {
        id: row.id,
        idProduct: row.idProduct,
        idPartInfo: row.idPartInfo,
        idParameter: row.idParameter
      }
      var params = {
        'partParameter': JSON.stringify(partParameter)
      }

      var url = '/product/deletePartParameterItem'
      _that.$refs.confirmDialog.updataClick(params, url)
    },

    // 设置默认值
    setDefault(row) {
      const _that = this
      var partParameter = row
      partParameter.isDefaultValue = 1
      // console.log(partParameter);
      var params = {
        'partParameter': JSON.stringify(partParameter)
      }

      var url = '/product/savePartPartmeterDefaultValue'
      _that.$refs.confirmDialog.updataClick(params, url)
    },

    // 搜索
    searchData() {
      this.listData.page = 1
      this.getPartParameter()
    },
    // 选择纸张档案
    choosePaper(row) {
      var _that = this
      _that.paperInfoDialogVisible = false
      console.log(row)
      _that.form.itemName = row.paperQuoteName
      _that.form.itemValue = row.id
      _that.addBtn()
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-container {
  margin-bottom: 15px;
}

.operateBtn {
  margin: 5px 0;
}
</style>
