<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>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all>
      <el-table-column
        type="index">
      </el-table-column>
      <el-table-column
        label="排序"
        prop="sortNum"
        width="60"
      >
      </el-table-column>
      <el-table-column
        prop="processName"
        label="工序名称">
      </el-table-column>
      <el-table-column label="工序标记">
        <template slot-scope="{row}">
          <el-tag type="success" v-if="row.specialFlag == 0">常规工序</el-tag>
          <el-tag type="danger" v-else-if="row.specialFlag == 1">特殊工序</el-tag>
        </template>
      </el-table-column>
     <el-table-column
        label="备注说明"
        prop="remark"
      >
      </el-table-column>
      <el-table-column align="center" label="状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag v-if="row.voidFlag==0" type="success">
            启用
          </el-tag>
          <el-tag v-else-if="row.voidFlag==1" type="danger">
            禁用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="left" 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="editStatus(row.id,'1')" type="danger" v-if="row.voidFlag==0" size="mini">
            禁用
          </el-button>
          <el-button @click="editStatus(row.id,'0')" v-else="row.voidFlag==1" 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="getInfo" />

    <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="dialogVisible" width="800px">
      <el-form label-width="110px" label-position="right">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" name="first">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="工序名称">
                  <el-input v-model="form.processName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="特殊工序标记">
                  <el-select v-model="form.specialFlag" placeholder="请选择" style="width: 260px;">
                    <el-option
                      v-for="flag in specialFlagOptions"
                      :key="flag.value"
                      :label="flag.label"
                      :value="flag.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="拼版标记">
                  <el-radio v-model="form.plateFlag" :label="1">参与</el-radio>
                  <el-radio v-model="form.plateFlag" :label="0">不参与</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="拼版文件优先级">
                  <el-input v-model="form.platePDFIndex" type="number"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="允许客户选择">
                  <el-radio v-model="form.selectFlag" :label="0">否</el-radio>
                  <el-radio v-model="form.selectFlag" :label="1">是</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="按序生产">
                  <el-radio v-model="form.queueFlag" :label="0">否</el-radio>
                  <el-radio v-model="form.queueFlag" :label="1">是</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="反馈类型">
                  <el-select v-model="form.feedBackFlag" placeholder="请选择" style="width: 260px;">
                    <el-option
                      v-for="item in FeedBackOptions"
                      :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-radio v-model="form.isFeedBack" :label="0">否</el-radio>
                  <el-radio v-model="form.isFeedBack" :label="1">是</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="反馈内容">
                  <el-select v-model="form.feedBackContent" placeholder="请选择" style="width: 260px;">
                    <el-option
                      v-for="item in options"
                      :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-select v-model="materialTypeIds" multiple placeholder="请选择" style="width: 260px;">
                    <el-option
                      v-for="item in materialTypeOptions"
                      :key="item.id"
                      :label="item.materialTypeName"
                      :value="item.id.toString()">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="起步价">
                <el-input type="number" v-model="form.baseMoney"></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单价">
                  <el-input type="number" v-model="form.price"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="排序">
                  <el-input type="number" v-model="form.sortNum"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注说明">
                  <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="配套工序" name="second">
            <el-button type="primary" @click="addPart" style="margin-bottom: 10px">添加</el-button>
            <el-dialog
              title="选择工序"
              :visible.sync="innerVisible"
              :close-on-click-modal="false"
              append-to-body>
            <div class="filter-container">
              <el-input v-model="paperSearch.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" />
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchPaper">
                搜索
              </el-button>
              <el-button class="filter-item" type="success" @click="saveSelection">
                保存
              </el-button>
            </div>
            <el-table
              :data="paperList"
              ref="processTable"
              row-key="id"
              style="width: 100%;margin-bottom: 20px;"
              border
              @selection-change="handleSelectionChange">

              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                prop="processName"
                label="工序名称">
              </el-table-column>

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

            <el-table
              :data="form.workProcessList"
              style="width: 100%;margin-bottom: 20px;"
              row-key="id"
              border
              default-expand-all>
              <el-table-column
                prop="processName"
                label="工序名称">
              </el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="{row}">
                  <el-button @click="deleteChoose(row.id)" type="danger" size="mini">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

          </el-tab-pane>
        </el-tabs>

      </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 { addWorkProcess, updateWorkProcess, getWorkProcess, getWorkProcessList, getWorkProcessListByIds } from '@/api/productFile/workProcessInfo.js'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'
import Pagination from '@/components/Pagination'
import {getMaterialTypeList} from "@/api/baseInfo/accessories/accessoriesType";

const form = {
  processName: '',
  specialFlag: '',
  workProcessIds: '',
  workProcessList: [],
  plateFlag: 0,
  platePDFIndex: '',
  selectFlag: 0,
  queueFlag: 0,
  feedBackFlag: '',
  isFeedBack: 0,
  feedBackContent: '',
  remark: '',
  materialTypeIds: '',
  sortNum: '',
  baseMoney: '',
  price: '',
}
export default {
  name: 'WorkProcessInfo',
  components: {
    Cancledialog, Pagination
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      dialogStatus: 1,
      dialogTitle: '',
      dialogVisible: false,
      search: {
        keyWord: ''
      },
      form: Object.assign({}, form),
      materialTypeIds: [],
      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      },

      activeName: 'first',
      options: [
        {
          label: '反馈完成',
          value: 0
        },
        {
          label: '反馈开始/完成',
          value: 1
        },
        {
          label: '反馈开始/完成/加数量',
          value: 2
        }
      ],
      specialFlagOptions: [
        {
          label: '常规工序',
          value: 0
        },
        {
          label: '特殊工序',
          value: 1
        }
      ],

      FeedBackOptions: [
        {
          label: '版反馈',
          value: 1
        },
        {
          label: '订单反馈',
          value: 2
        },
        {
          label: '工单反馈',
          value: 3
        }
      ],
      materialTypeOptions: [],

      innerVisible: false,
      paperSearch: {
        keyWord: '',
        excludeIds:''
      },
      paperList: [],
      typeListData: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      chooseList: [],

      confirmdialog: false,
      listLoading: false,
      tableData: [],
      menuId: ''
    }
  },

  mounted() {
    this.getInfo()
    this.getMaterialTypeInfo()
  },
  methods: {
    // 获取列表
    getInfo() {
      const _that = this
      _that.listLoading = true

      var params = _that.search
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }

      getWorkProcessList(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
      })
    },

    // tab导航点击
    addPart() {
      const _that = this
      _that.innerVisible = true
      _that.chooseList = []
      _that.typeListData.page = 1
      _that.getchooseList()
    },
    handleSelectionChange(val) {
      // console.log(val);
      var _that = this
      _that.chooseList = val
      console.log(_that.chooseList);
    },
    saveSelection() {
      const _that = this
      _that.innerVisible = false
      _that.form.workProcessList = _that.form.workProcessList.concat(_that.chooseList)

      var selectid = []
      _that.form.workProcessList.forEach(item => {
        selectid.push(item.id)
      })
      _that.form.workProcessIds = selectid.join(',')
    },
    deleteChoose(id) {
      var _that = this
      var workProcessList = _that.form.workProcessList
      workProcessList.forEach((item, index) => {
        if (item.id == id) {
          _that.form.workProcessList.splice(index, 1)
        }
      })
      var selectid = []
      _that.form.workProcessList.forEach(item => {
        selectid.push(item.id)
      })
      _that.form.workProcessIds = selectid.join(',')
    },
    // 选择工序列表
    getchooseList() {
      const _that = this
      _that.paperSearch.excludeIds = _that.form.workProcessIds
      var params = _that.paperSearch
      var page = {
        pageIndex: _that.typeListData.page,
        pageSize: _that.typeListData.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      getWorkProcessList(data).then(response => {
        var data = response.data
        console.log(data);
        // //  组合表单数据
        _that.paperList = data
        _that.typeListData.total = response.total
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 获取辅料分类列表
    getMaterialTypeInfo() {
      const _that = this
      var page = {
        pageIndex: 1,
        pageSize: 100
      }
      var data = {
        'params': JSON.stringify({
          'voidFlag': 0
        }),
        'page': JSON.stringify(page)
      }
      // console.log(data);
      getMaterialTypeList(data).then(response => {
        console.log(response)
        _that.materialTypeOptions = response.data
      }).catch(err => {
      })
    },

    searchPaper() {
      this.typeListData.page = 1
      this.getchooseList()
    },

    // 增加工序档案
    handleCreateAdd() {
      // 增加系统目录
      const _that = this
      _that.form = Object.assign({}, form)
      _that.dialogTitle = '增加工序档案'
      _that.dialogStatus = '1'
      _that.dialogVisible = true
      _that.activeName = 'first'
      _that.materialTypeIds = []
      _that.chooseList = []
    },
    // 刷新变革
    tableRefresh() {
      // 刷新变革
      this.getInfo()
    },
    // 增加工序档案
    addBtn() {
      const _that = this
      _that.form.materialTypeIds = _that.materialTypeIds.join(',')
      var printerTypeInfo = JSON.stringify(_that.form)
      var data = {
        'workProcess': printerTypeInfo
      }

      addWorkProcess(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) {
      const _that = this
      _that.form = Object.assign({}, form)

      _that.dialogTitle = '修改工序档案信息'
      _that.dialogVisible = true
      _that.dialogStatus = '2'
      _that.activeName = 'first'
      _that.form = Object.assign({}, form)
      _that.chooseList = []
      _that.materialTypeIds = []
      var idPrint = row.id
      var data = {
        idWorkProcess: idPrint
      }

      getWorkProcess(data).then(res => {
        console.log(res);
        const data = res.data
        _that.form = {
          id: data.id,
          processName: data.processName,
          remark: data.remark,
          specialFlag: data.specialFlag,
          workProcessIds: data.workProcessIds,
          // workProcessList: data.workProcessList,
          plateFlag: data.plateFlag,
          platePDFIndex: data.platePDFIndex,
          selectFlag: data.selectFlag,
          queueFlag: data.queueFlag,
          feedBackFlag: data.feedBackFlag,
          isFeedBack: data.isFeedBack,
          feedBackContent: data.feedBackContent,
          materialTypeIds: data.materialTypeIds,
          sortNum: data.sortNum,
          baseMoney: data.baseMoney,
          price: data.price
        }

        if (data.materialTypeIds) {
          _that.materialTypeIds = data.materialTypeIds.split(',')
        }
        if (data.workProcessList) {
          _that.form.workProcessList = data.workProcessList
          _that.chooseList = data.workProcessList
        } else {
          _that.form.workProcessList = []
          _that.chooseList = []
        }

        _that.$forceUpdate()// 重绘
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 修改工序档案
    editBtn() {
      const _that = this
      _that.form.materialTypeIds = _that.materialTypeIds.join(',')
      var printerTypeInfo = JSON.stringify(_that.form)
      var data = {
        'workProcess': printerTypeInfo
      }

      updateWorkProcess(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
      })
    },

    // 启用禁用
    editStatus(id, status) {
      var _that = this
      var printerTypeInfo = {
        id: id,
        voidFlag: status
      }
      var params = {
        'workProcess': JSON.stringify(printerTypeInfo)
      }

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

    // 搜索
    searchData() {
      this.listData.page = 1
      this.getInfo()
    }
  }
}
</script>
<style>
  .el-dialog__body{
    padding: 20px;
  }
</style>
<style lang="scss" scoped>
  .filter-container {
    margin-bottom: 15px;
  }
</style>
