<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="getpartWorkProcess" />
        </el-tooltip>
      </div>
    </div>

    <el-table :data="tableData" v-loading="listLoading" row-key="id" border default-expand-all>
      <!-- <el-table-column
        type="index">
      </el-table-column> -->
<!--      <el-table-column prop="productName" label="产品名称">-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="partinfoName" label="部件名称">-->
<!--      </el-table-column>-->
      <el-table-column prop="workProcessName" label="部件工序名称">
      </el-table-column>

      <el-table-column prop="workProcessName" label="必选">
        <template slot-scope="{row}">
          <span v-if="row.isRequired == 0">是</span>
          <span v-else-if="row.isRequired == 1">否</span>
        </template>
      </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 @click="handleUpdate(row)" type="primary" 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="getpartWorkProcess" />


    <el-dialog :close-on-click-modal="false" :title="dialogTitle" :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-select v-model="form.idWorkProcess" filterable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.processName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <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="必选">
              <el-radio v-model="form.isRequired" :label="0">是</el-radio>
              <el-radio v-model="form.isRequired" :label="1">否</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序">
              <el-input-number v-model="form.sortNum" controls-position="right" :min="1" />
            </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():editBtn()">确 定</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 {
   getPartWorkProcessList,
   addPartWorkProcess,
   getPartWorkProcessInfoById,
   updatePartWorkProcess,
    getWorkProcessList,
    getDictTypeInfo
  } from '@/api/productFile/partWorkProcessInfo.js'
  import Cancledialog from '@/components/Dialog/Cancledialog.vue'
  import Pagination from '@/components/Pagination'

  const form = {
    idProduct: '',
    idPartInfo: '',
    idWorkProcess: '',
    workProcessName:'',
    cssType:'',
    sortNum:'',
    isRequired:0
  }

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

        options: [],
        cssOptions:[],

        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.getpartWorkProcess();
      // this.getProcess();
      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)
      },

      //获取列表
      getpartWorkProcess() {
        const _that = this
        _that.listLoading = true


        var params = _that.search;
        var page = {
          pageIndex: _that.listData.page,
          pageSize: _that.listData.pageSize,
        }
        var data = {
          "idProduct": _that.idProduct,
          "idPartInfo": _that.idPartInfo
        }

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


      // 获取产品工序
      getProcess(){
        const _that = this


        var data = {
          "params": JSON.stringify({
            "voidFlag":0
          }),
        }

        // console.log(data)
        getWorkProcessList(data).then(response => {
          console.log(response)
          const data = response.data
          _that.options = data
        }).catch(err => {
          _that.$message.error(err)
        })
      },

      //获取字典样式
      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)
        })
      },


      //增加部件工序档案
      handleCreateAdd() {
        const _that = this
        _that.form = Object.assign({}, form),
          _that.form.idProduct = _that.idProduct
        _that.form.idPartInfo = _that.idPartInfo
        _that.dialogTitle = '增加部件工序档案'
        _that.dialogStatus = '1';
        _that.dialogVisible = true;
        _that.getProcess();

      },
      //刷新变革
      tableRefresh() {
        //刷新变革
        this.getpartWorkProcess()
      },
      //增加部件工序档案
      addBtn() {
        const _that = this
        var printerTypeInfo = JSON.stringify(_that.form)
        var data = {
          "partWorkProcess": printerTypeInfo,
        }
        // console.log(data);
        // return

        addPartWorkProcess(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';
        _that.getProcess();

        var data = {
          idPartWorkProcess: row.id,
          idProduct: row.idProduct,
          idPartInfo: row.idPartInfo,
          idWorkProcess: row.idWorkProcess,
        }

        // console.log(data);
        getPartWorkProcessInfoById(data).then(res => {
          console.log(res);
          const data = res.data

          _that.form = {
            id: data.id,
            idProduct: data.idProduct,
            idPartInfo: data.idPartInfo,
            idWorkProcess: data.idWorkProcess,
            workProcessName:data.workProcessName,
            cssType:data.cssType,
            sortNum:data.sortNum,
            isRequired:data.isRequired
          }
        }).catch(err => {
          _that.$message.error(err)
        })
      },
      //修改部件工序档案
      editBtn() {
        const _that = this
        var printerTypeInfo = JSON.stringify(_that.form)
        var data = {
          "partWorkProcess": printerTypeInfo,
        }

        updatePartWorkProcess(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
        })

      },

      //删除部件工序
      deleteRow(row) {
        console.log(row)
        const _that = this
        var partWorkProcess = {
          id: row.id,
          idProduct: row.idProduct,
          idPartInfo: row.idPartInfo,
          idWorkProcess: row.idWorkProcess,
        }
        var params = {
          "partWorkProcess": JSON.stringify(partWorkProcess),
        }

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

      },

      //搜索
      searchData() {
        this.listData.page = 1;
        this.getpartWorkProcess()
      }
    }
  }
</script>

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