<template>
  <div class="app-container">
    <div class="filter-container">

      <el-input size="mini" v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" />
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>

      <el-button
        size="mini"
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreateAdd">
        增加单据定义
      </el-button>
    </div>
    <el-table
      size="mini"
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all>
      <el-table-column label="操作" align="center" width="180px" 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-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="row.voidFlag==1" type="danger">
            禁用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="单据名称" align="center" prop="billName" :show-overflow-tooltip="true"/>
      <el-table-column
        prop="billMethod"
        width="120px"
        label="单据简称">
      </el-table-column>
      <el-table-column
        prop="billPrefix"
        label="单号前缀">
      </el-table-column>
      <el-table-column label="管理网址" align="center" prop="listUrl" :show-overflow-tooltip="true"/>
      <el-table-column label="增加网址" align="center" prop="addUrl" :show-overflow-tooltip="true"/>
      <el-table-column label="修改网址" align="center" prop="editUrl" :show-overflow-tooltip="true"/>
      <el-table-column label="查看网址" align="center" prop="viewUrl" :show-overflow-tooltip="true"/>
      <el-table-column label="明细类型" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.detailKind==0">物料</span>
          <span v-if="scope.row.detailKind==1">纸张</span>
          <span v-if="scope.row.detailKind==2">科目</span>
          <span v-if="scope.row.detailKind==3">对账明细</span>
          <span v-if="scope.row.detailKind==4">销售订单</span>
        </template>
      </el-table-column>
      <el-table-column label="单据定义类型" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <!--          <router-link :to="{path:'/system/dictData',query:{typeId:scope.row.id,dictType:scope.row.dictType}}" class="link-type">-->
          <el-link  @click="$router.push({path:'/defineList/defineData/'+scope.row.id ,query:{typeId:scope.row.id,dictType:scope.row.billName}})" type="primary">单据流程步骤</el-link>
          <!--          </router-link>-->
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="160px"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.createTime">{{scope.row.createTime | getTime}}</span>
        </template>
      </el-table-column>

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


    <el-dialog :close-on-click-modal="false" :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <el-form label-width="130px" label-position="right">
        <el-form-item label="单据名称" prop="billName">
          <el-input v-model="form.billName" placeholder="请输入单据名称" />
        </el-form-item>
        <el-form-item label="单据简称" prop="billMethod">
          <el-input v-model="form.billMethod" placeholder="请输入单据简称" />
        </el-form-item>
        <el-form-item label="单据前缀" prop="billPrefix">
          <el-input v-model="form.billPrefix" type="text" placeholder="请输入查看网址"></el-input>
        </el-form-item>
        <el-form-item label="管理网址" prop="listUrl">
          <el-input v-model="form.listUrl" type="text" placeholder="请输入管理网址"></el-input>
        </el-form-item>
        <el-form-item label="增加网址" prop="addUrl">
          <el-input v-model="form.addUrl" type="text" placeholder="请输入增加网址"></el-input>
        </el-form-item>
        <el-form-item label="修改网址" prop="editUrl">
          <el-input v-model="form.editUrl" type="text" placeholder="请输入修改网址"></el-input>
        </el-form-item>
        <el-form-item label="查看网址" prop="viewUrl">
          <el-input v-model="form.viewUrl" type="text" placeholder="请输入查看网址"></el-input>
        </el-form-item>

        <el-form-item label="明细类型" prop="detailKind">
          <el-select v-model="form.detailKind" placeholder="请选择明细类型">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.detailKind"
              :value="item.detailKind+','+item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="允许直接新建">
          <el-switch v-model="delivery"></el-switch>
        </el-form-item>
        <el-form-item label="允许暂停">
          <el-switch v-model="showStopButtonFlag"></el-switch>
        </el-form-item>
        <el-form-item label="允许调纸汇总">
          <el-switch v-model="showPaperButtonFlag"></el-switch>
        </el-form-item>
        <el-form-item label="允许冲销明细">
          <el-switch v-model="redItemMFlag"></el-switch>
        </el-form-item>
      </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>
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
  </div>
</template>

<script>
import {getInfo,addInfo,updateInfo,getInfoById} from '@/api/baseInfo/defineList/defineList.js'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'

// const form={
//   id: undefined,
//   dictName: undefined,
//   dictType: undefined,
//   remark: undefined
// };

export default {
  name:'defineList',
  components: {
    Cancledialog
  },
  data() {
    return {
      options: [{
        id: 0,
        detailKind: '辅料',
      }, {
        id: 1,
        detailKind: '纸张'
      }, {
        id: 2,
        detailKind: '科目'
      }, {
        id: 3,
        detailKind: '对账明细'
      }, {
        id: 4,
        detailKind: '销售订单'
      }],
      dialogStatus: 1,//1增加，2修改
      dialogTitle: '',
      dialogVisible: false,

      innerVisible:false,

      search: {
        keyWord:''
      },
      delivery:false,
      showStopButtonFlag:false,
      showPaperButtonFlag:false,
      redItemMFlag:false,
      form:{},
      confirmdialog:false,
      listLoading: false,
      tableData: [],

      listData:{
        total:0,
        page: 1,
        pageSize:10
      },


    }
  },
  mounted() {
    this.getTypeList();
  },
  methods: {
    //获取列表
    getTypeList() {
      const _that = this
      _that.listLoading = true
      let params = _that.search;
      var page = {
        pageIndex:_that.listData.page,
        pageSize: _that.listData.pageSize,
      }
      let data = {
        "params": JSON.stringify(params),
        "page": JSON.stringify(page),
      }
      // console.log(data);
      getInfo(data).then(response => {
        console.log("getTypeList",response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data;
        _that.listData.total = response.total;
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err);
        _that.listLoading = false
      })
    },

    //增加单据定义管理
    handleCreateAdd(){
      const _that = this
      _that.form={},
      _that.dialogTitle = '增加单据定义'
      _that.dialogStatus = '1';
      _that.dialogVisible = true;
    },
    //增加档案
    addBtn(){
      const _that = this;
      if(_that.delivery==true){
        _that.form.directNewFlag = 1;
      }else {
        _that.form.directNewFlag = 0;
      }
      if(_that.redItemMFlag==true){
        _that.form.redItemMFlag = 1;
      }else {
        _that.form.redItemMFlag = 0;
      }
      if(_that.showStopButtonFlag==true){
        _that.form.showStopButtonFlag = 1;
      }else {
        _that.form.showStopButtonFlag = 0;
      }
      if(_that.showPaperButtonFlag ==true){
        _that.form.showPaperButtonFlag = 1;
      }else {
        _that.form.showPaperButtonFlag = 0;
      }
      _that.form.detailKind = _that.form.detailKind.split(',')[1];
      // console.log(_that.form);
      let info =JSON.stringify(_that.form)
      let data = {
        "billDefine": info ,
      }
      // console.log(data);
      // return
      addInfo(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.dialogTitle = '修改单据定义';
      _that.dialogVisible = true;
      _that.dialogStatus = '2';
      let idPrint = row.id
      let data= {
        idBillDefine : idPrint
      }
      // console.log(data);
      getInfoById(data).then(res => {
        console.log("getInfoById",res);
        const data = res.data;
        if(data.directNewFlag==0){
          _that.delivery = false;
        }
        if(data.directNewFlag==1){
          _that.delivery = true;
        }
        if(data.redItemMFlag==0){
          _that.redItemMFlag = false;
        }
        if(data.redItemMFlag==1){
          _that.redItemMFlag = true;
        }
        if(data.showStopButtonFlag==0){
          _that.showStopButtonFlag = false;
        }
        if(data.showStopButtonFlag==1){
          _that.showStopButtonFlag = true;
        }
        if(data.showPaperButtonFlag==0){
          _that.showPaperButtonFlag = false;
        }
        if(data.showPaperButtonFlag==1){
          _that.showPaperButtonFlag = true;
        }
        if(data.detailKind==0){
          var detailKindName = "辅料";
        }else if (data.detailKind==1){
          var detailKindName = "纸张";
        }else if (data.detailKind==2){
          var detailKindName = "科目";
        }else if (data.detailKind==3){
          var detailKindName = "对账明细";
        }else if (data.detailKind==4){
          var detailKindName = "销售订单";
        }

        _that.form={
          id:data.id,
          billName: data.billName,
          billPrefix: data.billPrefix,
          billMethod: data.billMethod,
          addUrl: data.addUrl,
          editUrl: data.editUrl,
          listUrl: data.listUrl,
          viewUrl: data.viewUrl,
          detailKind: detailKindName,
          detailKindNameId: data.detailKind
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    //修改档案
    editBtn(){
      const _that = this;
      if (_that.form.detailKind.split(',').length > 1) {
        var detailKindNameId = _that.form.detailKind.split(',')[1]
      } else {
        var detailKindNameId = _that.form.detailKindNameId
      }
      _that.form.detailKind = detailKindNameId;
      if(_that.delivery==true){
        _that.form.directNewFlag = 1;
      }else {
        _that.form.directNewFlag = 0;
      }
      if(_that.redItemMFlag==true){
        _that.form.redItemMFlag = 1;
      }else {
        _that.form.redItemMFlag = 0;
      }
      if(_that.showStopButtonFlag==true){
        _that.form.showStopButtonFlag = 1;
      }else {
        _that.form.showStopButtonFlag = 0;
      }
      if(_that.showPaperButtonFlag==true){
        _that.form.showPaperButtonFlag = 1;
      }else {
        _that.form.showPaperButtonFlag = 0;
      }
      // console.log(_that.form);
      let info =JSON.stringify(_that.form)
      let data = {
        "billDefine": info ,
      }
      // console.log(data);
      // return;
      updateInfo(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
      })

    },


    //刷新变革
    tableRefresh(){
      //刷新变革
      this.getTypeList()
    },

    //启用禁用
    editStatus(id,status){
      let _that = this;
      let printerTypeInfo = {
        id:id,
        voidFlag:status
      }
      let params = {
        "billDefine": JSON.stringify(printerTypeInfo),
      }

      let url = '/inventory/voidBillDefine';
      _that.$refs.confirmDialog.updataClick(params, url);
    },

    //搜索
    searchData(){
      this.listData.page = 1;
      this.getTypeList()
    },

  }
}
</script>

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