<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
      :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="270px"  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)" type="danger" size="mini">
            删除
          </el-button>
          <el-button @click="handleRoleUserList(row)" type="primary" size="mini">操作人员
          </el-button>
        </template>
      </el-table-column>
      <!--      <el-table-column label="流程步骤编码" align="center" prop="dictCode" />-->
      <el-table-column label="步骤名称" align="center" prop="actionName" />
      <el-table-column label="步骤状态名称" align="center" prop="statusName" />
      <el-table-column label="对应单据状态值" align="center" prop="billStatus" />
      <el-table-column label="排序值" align="center" prop="sortNum" />
      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
      <!--      <el-table-column label="创建时间" align="center" prop="createTime" width="180">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span>{{ parseTime(scope.row.createTime) }}</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="步骤名称">
          <el-input v-model="form.actionName"/>
        </el-form-item>
        <el-form-item label="步骤状态名称" prop="statusName">
          <el-input v-model="form.statusName"/>
        </el-form-item>
        <el-form-item label="对应单据状态值" prop="billStatus">
          <el-input v-model="form.billStatus"/>
        </el-form-item>
        <el-form-item label="排序值" prop="sortNum">
          <el-input v-model="form.sortNum"/>
        </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>

    <el-dialog title="操作人员列表" :visible.sync="dialogTableVisible" width="400px">
      <el-button style="margin-bottom: 15px" size="mini" type="primary" @click="batchAddPerson()">增加操作人员</el-button>
      <el-table :data="gridData" size="mini" border>
        <el-table-column fixed="left" label="操作" align="center" width="80" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button @click="deleteRoleUser(row)" class="operateBtn" type="primary" size="mini">
              删除
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="loginUserName"
          label="登录名称">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="155">
          <template slot-scope="{row}">
          <span v-if="row.createTime">
          {{ row.createTime | getTime }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
<!--    <el-dialog title="选择用户" :visible.sync="dialogTableVisibleInner" width="800px">-->
<!--      <el-table :data="gridDataInner" size="mini" border>-->
<!--        <el-table-column-->
<!--          prop="loginName"-->
<!--          label="登录名称">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="userName"-->
<!--          label="用户名">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="deptName"-->
<!--          label="部门">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="email"-->
<!--          label="邮箱">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="phoneNumber"-->
<!--          label="手机">-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="status"-->
<!--          label="状态">-->
<!--          <template slot-scope="{row}">-->
<!--            <el-tag v-if="row.status==0" type="success">-->
<!--              正常-->
<!--            </el-tag>-->
<!--            <el-tag v-else="row.status==1" type="danger">-->
<!--              停用-->
<!--            </el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          prop="createTime"-->
<!--          label="创建时间"-->
<!--          width="155">-->
<!--          <template slot-scope="{row}">-->
<!--          <span v-if="row.createTime">-->
<!--          {{ row.createTime | getTime }}-->
<!--            </span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column fixed="left" label="操作" align="center" width="80" class-name="small-padding fixed-width">-->
<!--          <template slot-scope="{row}">-->
<!--            <el-button @click="addRoleUser(row)" class="operateBtn" type="primary" size="mini">-->
<!--              选择-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--      <pagination style="margin-top: 5px" v-show="listData1.total>0" :total="listData1.total" :page.sync="listData1.page" :limit.sync="listData1.pageSize" @pagination="getHomeInfo" />-->
<!--    </el-dialog>-->

    <el-dialog title="批量添加人员" :visible.sync="dialogTableVisibleInner">
      <user :key="timer" :is-choose="true" :type="0"  @chooseUser='chooseUsers' :table-size="'mini'"></user>
    </el-dialog>
  </div>
</template>

<script>//addRoleUser
import { getInfo, addInfo, updateInfo, getInfoById,getBillDefineActionRoleUserList,listUser,
  addBillDefineActionRoleUser,
  deleteBillDefineActionRoleUser
} from '@/api/baseInfo/defineList/defineData.js'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'
import Pagination from '@/components/Pagination'
import User from '@/views/system/user/user'

const form = {
  id: undefined,
  idType: undefined,
  dictLabel: undefined,
  dictValue: undefined,
  sortNum: undefined,
  remark: undefined
}

export default {
  name: 'DictData',
  components: {
    Cancledialog, Pagination,User
  },
  data() {
    return {
      timer:"",
      rowdata:{},
      dialogTableVisibleInner:false,
      gridDataInner:[],
      dialogTableVisible:false,
      gridData:[],
      tempRoute: {},
      dialogStatus: 1, // 1增加，2修改
      dialogTitle: '',
      dialogVisible: false,

      innerVisible: false,

      search: {
        keyWord: ''
      },
      search1: {
        keyWord: ''
      },
      form: Object.assign({}, form),

      confirmdialog: false,
      listLoading: false,
      tableData: [],

      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      listData1: {
        total: 0,
        page: 1,
        pageSize: 10
      },
      typeId: '',
      dictType: ''

    }
  },
  created() {
    this.typeId = this.$route.query.typeId;
    this.dictType = this.$route.query.dictType;
    this.tempRoute = Object.assign({}, this.$route);
    this.setTagsViewTitle()
  },
  mounted() {
    this.getTypeList();
    this.getHomeInfo();
  },
  methods: {
    deleteRoleUser(row){
      //删除操作人员
      const _that = this;
      _that.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var roleInfo = {
          'id': row.id,
          'idBillDefine':_that.$route.query.typeId,
          'idBillDefineAction': _that.rowdata.id,
          'idLoginUser': row.idLoginUser,
          'loginUserName': row.loginUserName
        }
        var data = {
          'roleInfo': JSON.stringify(roleInfo),
        }
        deleteBillDefineActionRoleUser(data).then(response => {
          if (response.httpCode == 200) {
            _that.$message("删除成功")
            _that.dialogTableVisibleInner = false;
            var data = {
              'idBillDefine':_that.$route.query.typeId,
              'idAction': _that.rowdata.id
            }
            getBillDefineActionRoleUserList(data).then(response => {
              var data = response
              _that.gridData = response.data;
              _that.dialogTableVisible = true;
            })
          } else {
            _that.$message.error(response.msg)
          }

        })
      }).catch(() => {
      });
    },
    chooseUsers(row){
      // console.log(row);
      const _that = this;
      var roleInfo = {
        'idBillDefine':_that.$route.query.typeId,
        'idBillDefineAction': _that.rowdata.id,
        'idLoginUser': row.id,
        'loginUserName': row.loginName
      }
      var data = {
        'roleInfo': JSON.stringify(roleInfo),
      }
      addBillDefineActionRoleUser(data).then(response => {
        if (response.httpCode == 200) {
          _that.$message.success("操作人员增加成功")
          _that.dialogTableVisibleInner = false;
          var data = {
            'idBillDefine':_that.$route.query.typeId,
            'idAction': _that.rowdata.id
          }
          getBillDefineActionRoleUserList(data).then(response => {
            var data = response
            _that.gridData = response.data;
            _that.dialogTableVisible = true;
          })
        } else {
          _that.$message.error(response.msg)
        }

      })
    },
    // 批量增加
    batchAddPerson() {
      this.dialogTableVisibleInner = true;

      this.timer = new Date().getTime()
    },
    handleRoleUserList(row){
      //操作人员列表
      const _that = this;
      _that.rowdata = row;
      var data = {
        'idBillDefine':_that.$route.query.typeId,
        'idAction': row.id
      }
      getBillDefineActionRoleUserList(data).then(response => {
        var data = response
        _that.gridData = response.data;
        _that.dialogTableVisible = true;
      })
    },
    getHomeInfo() {
      // 获取用户列表信息
      const _that = this
      var params = _that.search1
      var page = {
        pageIndex: _that.listData1.page,
        pageSize: _that.listData1.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      listUser(data).then(response => {
        var data = response
        _that.gridDataInner = response.data;
        _that.listData1.total = response.total;
      })
    },
    getRoleUserList() {
      // 获取用户列表信息

    },
    // 设置标签名称
    setTagsViewTitle() {
      const title = '流程步骤'

      // console.log("tempRoute2",this.tempRoute);
      const route = Object.assign({}, this.tempRoute, { title: `${this.dictType}-${title}` })
      // console.log("route",route)
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },

    // 获取列表
    getTypeList() {
      const _that = this
      _that.listLoading = true
      const params = {
        // keyWord: _that.search.keyWord,
        idBillDefine: _that.typeId
      }

      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      const data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      // console.log(data);
      getInfo(params).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
      })
    },

    // 增加流程步骤管理
    handleCreateAdd() {
      const _that = this
      _that.form = Object.assign({}, form)

      _that.form.idType = _that.typeId
      _that.dialogTitle = '增加流程步骤管理'
      _that.dialogStatus = '1'
      _that.dialogVisible = true
    },
    // 增加档案
    addBtn() {
      const _that = this
      var regexp = /^[1-9]\d*$/
      console.log(_that.form.billStatus)
      console.log(_that.form.sortNum)

      if (!regexp.test(_that.form.billStatus)) {
        _that.$message('请输入大于0的正整数')
        return
      }
      if (!regexp.test(_that.form.sortNum)) {
        _that.$message('请输入大于0的正整数')
        return
      }
      //
      _that.form.idBillDefine = _that.typeId
      const info = JSON.stringify(_that.form)
      const data = {
        'defineAction': 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'
      const idPrint = row.id
      const data = {
        idAction: idPrint,
        idBillDefine: _that.typeId
      }
      // console.log(data);
      getInfoById(data).then(res => {
        const data = res.data
        console.log(res.data)

        _that.form = {
          id: data.id,
          idAction: data.idAction,
          idBillDefine: data.idBillDefine,
          actionName: data.actionName,
          statusName: data.statusName,
          billStatus: data.billStatus,
          sortNum: data.sortNum
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    // 修改档案
    editBtn() {
      const _that = this
      const info = JSON.stringify(_that.form)
      const data = {
        'defineAction': info
      }
      // console.log(data);

      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(row) {
      const _that = this
      const printerTypeInfo = {
        id: row.id,
        idbilldefine: row.idBillDefine
      }
      const params = {
        'defineAction': JSON.stringify(printerTypeInfo)
      }

      const url = '/inventory/deleteBillDefineAction'
      _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>
