<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">
      <el-table-column label="部件参数名称" prop="parameterName">
      </el-table-column>
      <el-table-column prop="itemValue" label="参数值列表">
        <template slot-scope="scope">
          <el-link
            @click="$router.push(
              {
              path:'/productFile/partParameterChild/'+scope.row.id ,
              query:{
                idProduct:scope.row.idProduct,
                idPartInfo:scope.row.idPartInfo,
                idParameter:scope.row.idParameter,
                productName: scope.row.productName,
                partName: scope.row.partName,
                parameterName:scope.row.parameterName,
                fieldType:scope.row.fieldType
              }
              }
              )"
            type="primary">参数值</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="" label="输入方式">
        <template slot-scope="{row}">
            <span v-if="row.selectKind == 0">输入</span>
            <span v-else-if="row.selectKind == 2">下拉自定义</span>
            <span v-else-if="row.selectKind == 3">下拉</span>
            <span v-else-if="row.selectKind == 4">弹窗</span>
        </template>
      </el-table-column>
      <el-table-column prop="defaultValue" label="默认值">
      </el-table-column>
      <el-table-column prop="sortNum" label="排序">
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button class="operateBtn" type="primary" @click="handleUpdate(row)" 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="产品参数" v-if="dialogStatus==1">
              <el-select v-model="form.idParameter" filterable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.parameterName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品参数" v-else-if="dialogStatus==2">
              <el-input readonly v-model="form.parameterName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="选择方式">
              <el-select v-model="form.selectKind" filterable placeholder="请选择">
                <el-option
                  v-for="item in kindOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="默认值">
              <el-input v-model="form.defaultValue"></el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12" v-if="dialogStatus==2">-->
<!--            <el-form-item label="项目样式">-->
<!--              <el-select v-model="form.cssType" filterable placeholder="请选择">-->
<!--                <el-option-->
<!--                  v-for="item in cssOptions"-->
<!--                  :key="item.id"-->
<!--                  :label="item.dictLabel"-->
<!--                  :value="item.dictValue">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
          <el-col :span="12">
            <el-form-item label="占位符" v-if="form.selectKind == 2">
              <el-input v-model="form.placeHolder"></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="dialogStatus==='1'?addBtn():editSave()">确 定</el-button>
      </div>
    </el-dialog>
    <!--    <servicedialog @tableRefresh="tableRefresh" ref="menuDialog" :dialogStatus="dialogStatus" :menuId="menuId" :titleDialog="titleDialog" :dialogVisible="dialogVisible"/>-->
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
  </div>
</template>

<script>
import {
  getPartParameterList,
  addPartParameter,
  getPartParameterInfoById,
  updatePartParameter,
  getParameter
} from '@/api/productFile/partParameterInfo.js'
import {
  getDictTypeInfo
} from '@/api/productFile/partWorkProcessInfo.js'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'

const form = {
  idProduct: '',
  idPartInfo: '',
  idParameter: '',
  parentId: '',
  parameterName: '',
  selectKind: '',
  itemValue: '',
  cssType: '',
  enterType: '',
  placeHolder: '',
  defaultValue: '' // 默认
}

export default {
  components: {
    Cancledialog
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      idProduct: '',
      idPartInfo: '',
      dialogStatus: 1, // 1增加，2修改
      dialogTitle: '',
      dialogVisible: 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.productName = this.$route.query.productName
    this.partName = this.$route.query.partName
    this.getPartParameter()// 获取部件参数列表
    // this.getParameterList();//获取产品参数
    this.getDictType()// 获取字典
    this.tempRoute = Object.assign({}, this.$route)
    this.setTagsViewTitle()
  },
  methods: {
    // 设置标签名称
    setTagsViewTitle() {
      const title = '部件参数'

      // console.log("tempRoute2",this.tempRoute);
      const route = Object.assign({}, this.tempRoute, { title: `${this.productName}-${this.partName}-${title}` })
      // 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
      }

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

    // 获取字典样式
    getDictType() {
      const _that = this
      var data = {
        'dictTypeText': 'partCssType'
      }

      // console.log(data)
      getDictTypeInfo(data).then(response => {
        console.log(response)
        const data = response.data
        _that.cssOptions = data
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 获取产品部件
    getParameterList() {
      const _that = this
      var data = {}

      // console.log(data)
      getParameter(data).then(response => {
        console.log(response)
        const data = response.data

        _that.options = data
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    // 增加部件参数档案
    handleCreateAdd() {
      const _that = this
      _that.form = Object.assign({}, form),
      _that.form.idProduct = _that.idProduct
      _that.form.idPartInfo = _that.idPartInfo
      _that.getParameterList()
      _that.dialogTitle = '增加部件参数档案'
      _that.dialogStatus = '1'
      _that.dialogVisible = true
    },
    // 刷新变革
    tableRefresh() {
      // 刷新变革
      this.getPartParameter()
    },
    // 增加部件参数档案
    addBtn() {
      const _that = this
      var printerTypeInfo = JSON.stringify(_that.form)
      var data = {
        'partParameter': printerTypeInfo
      }
      // console.log(data);
      // return

      addPartParameter(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          _that.dialogVisible = false
          _that.$message({
            message: '增加成功',
            type: 'success'
          })
          _that.tableRefresh()
        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
        _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,
      }

      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,
          placeHolder: data.placeHolder,
          selectKind: data.selectKind,
          defaultValue: data.defaultValue, // 默认
          sortNum: data.sortNum
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 修改部件参数档案
    editSave() {
      const _that = this

      var printerTypeInfo = JSON.stringify(_that.form)
      var data = {
        'partParameter': printerTypeInfo
      }
      // console.log(row);
      // return;
      updatePartParameter(data).then(res => {
        // console.log(res);
        if (res.httpCode == 200) {
          _that.dialogVisible = false
          _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,
        parentId: row.parentId
      }
      var params = {
        'partParameter': JSON.stringify(partParameter)
      }

      var url = '/product/deletePartParameter'
      _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()
    }
  }
}
</script>

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

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