<template>
    <div>
      <div class="container">
        <!-- 标题  -->
        <MenuTitle :menuTile="'资料袋管理'"></MenuTitle>
        <!-- 高级搜索按钮 -->
        <div class="highSearchBtn" @click="showSearch = !showSearch">查询</div>
        <!-- 搜索项 -->
        <div v-show="showSearch" class="searchTable">
          <a-form class="ant-advanced-search-form" :form="form" layout="inline" labelAlign="right">
            <a-row :gutter="24" :style="{ textAlign: 'center' }">
              <a-col :span="12">
                <a-form-item label="资料袋编码" props="code">
                  <a-input placeholder="请输入资料袋编码" v-model="queryParams.code" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="资料袋类型" props="type">
                  <a-input placeholder="请输入资料袋类型" v-model="queryParams.type" />
                </a-form-item>
              </a-col>
              <a-divider dashed />
              <a-col :span="12">
                <a-form-item label="所属站点" props="site">
                  <a-input placeholder="请输入所属站点" v-model="queryParams.site" />
                </a-form-item>
              </a-col>
              <a-divider dashed />
            </a-row>
          </a-form>
          <!-- 搜索按钮 -->
          <div class="searchBtns">
            <a-button icon="search" type="primary" @click="search">搜索</a-button>
            <a-button icon="sync" @click="reset">重置</a-button>
          </div>
        </div>
      </div>
      <div class="container mrt_10">
        <div class="tab">
          <div style="position: absolute; right: 4%;z-index: 999">
                <a-button @click="handleAddMaterialBag" type="primary">新增</a-button>
          </div>
          <a-tabs type="card" @change="callback" :tabBarGutter="10">
            <a-tab-pane key="3" tab="全部"> </a-tab-pane>
            <a-tab-pane key="1" tab="已使用"> </a-tab-pane>
            <a-tab-pane key="0" tab="未使用"> </a-tab-pane>
            <a-tab-pane key="2" tab="已作废"> </a-tab-pane>
          </a-tabs>
        </div>
        <!-- 列表 -->
        <div class="list">
          <a-table
            :columns="columns"
            bordered
            rowKey="id"
            :expandIconColumnIndex="1"
            :data-source="tableData"
            :pagination="false"
            childrenColumnName="cd"
            @expand="expand"
          >
            <!-- <span slot="value" slot-scope="text, record">
              <span class="expand">[{{ record.serviceType | serveTypeFilter(that) }}] </span>
              {{ text }}
            </span> -->
            <span slot="bagQrCode" slot-scope="bagQrCode">
                 <a @click="handleQrCode(bagQrCode)">查看</a>
            </span>
            <span slot="status" slot-scope="status">
              <span v-if="status == '0'">未使用</span>
              <span v-if="status == '1'">已使用</span>
              <span v-if="status == '2'">已作废</span>
            </span>
            <span slot="handle" slot-scope="text, record">
              <a disabled v-if="record.status == '2'">—</a>
              <a v-else @click="cancel(record.id)" style="color: red;">作废</a>
              <a-divider v-if="record.flowStatus == 4" type="vertical" class="table_line" />
            </span>
          </a-table>
          <div class="myPagination">
            <a-pagination
              :current="Number(queryParams.pageNo)"
              @change="changeNum"
              @showSizeChange="changePage"
              show-quick-jumper
              show-less-items
              show-size-changer
              :show-total="(total) => `共 ${total} 条记录 第 ${queryParams.pageNo} / ${pageTotal} 页`"
              :total="total"
            />
          </div>
        </div>
      </div>
      <!-- 流转备注弹框 -->
      <!-- <div class="lzbz" ref="lzbzModel">
        <a-modal
          v-model="visible"
          title="流转备注"
          :getContainer="() => this.$refs.lzbzModel"
          width="500px"
          @ok="handleOk"
          @cancel="handleCancel"
        >
          <a-form-model ref="ruleForm" :model="form2" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="备注信息" prop="remark">
              <a-input v-model="form2.remark" />
            </a-form-model-item>
          </a-form-model>
        </a-modal>
      </div> -->
      <materialBag-modal ref="modalForm" @ok="modalFormOk"></materialBag-modal>
      <qrCode-modal ref="qrmodalForm"></qrCode-modal>
    </div>
  </template>
  
  <script>
  import MenuTitle from '@/views/ai/MenuTitle'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import MaterialBagModal from './modules/MaterialBagModal'
  import QrCodeModal from './modules/QrCodeModal'
//   import InIure from '@/views/windowService/service/online/InIure.vue'
  import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
  import { getAction } from '@/api/manage'
  import moment from 'moment'
  export default {
    mixins: [JeecgListMixin],
    components: {
      MenuTitle,
      MaterialBagModal,
      QrCodeModal,
    //   InIure,
    },
    data() {
      return {
        // visible: false,
        url: {
          list:'/system/materialBag/list',
          acceptanceList: '/system/materialBag/list',
          cancel:'/system/materialBag/cancel',
          state: '/application/offline/route/flow/state',
          getNumber: '/application/offline/route/get/number/each/flow/state',
        },
        that: this,
        // 是否展示搜索项
        showSearch: false,
        loading: false,
  
        showDetail: false,
        type: '',
        // 总条数
        total: 0,
        // 总页数
        pageTotal: 0,
        form: {},
        moment,
        startTime: null,
        endTime: null,
        activeCate: -1,
        columns: [
          {
            title: '序号',
            // key: 'index',
            customRender: (text, record, index) =>
              `${(this.queryParams.pageNo - 1) * this.queryParams.pageSize + (index + 1)}`,
            // dataIndex: 'id',
            align: 'center',
            width: '45px',
          },
          {
            title: '资料袋编码',
            dataIndex: 'code',
            align: 'center',
          },
          {
            title: '资料袋类型',
            dataIndex: 'type',
            align: 'center',
          },
          {
            title: '所属站点',
            dataIndex: 'site',
            align: 'center',
          },
          {
            title: '关联设备',
            dataIndex: 'relatedEquipment',
            align: 'center',
          },
          {
            title: '资料袋二维码',
            dataIndex: 'bagQrCode',
            align: 'center',
            scopedSlots: { customRender: 'bagQrCode' },
          },
            
          {
            title: '使用状态',
            dataIndex: 'status',
            align: 'center',
            key: 'status',
            scopedSlots: { customRender: 'status' },
          },
          {
            title: '资料柜信息',
            dataIndex: 'materialBoxData',
            align: 'center',
          },
          // {
          //   title: '详细地址',
          //   dataIndex: 'related_equipment',
          //   align: 'center',
          // },
          {
            title: '操作',
            align: 'center',
            key: 'handle',
            scopedSlots: { customRender: 'handle' },
          },
        ],
        tableData: [],
        data: [],
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          code: null,
          type: null,
          site: null
        },
        //受理状态
        deStatus: undefined,

        //服务类型字典
        dictServeOptions: [],
        // 操作服务
        acceptanceItem: {},
        // 服务数量
        serviceNum: {
          pendingFlowNum: 0,
          materialFlowNum: 0,
          inProcessNum: 0,
          resultPendingNum: 0,
          resultsInFlowNum: 0,
          resultAcquisitionNum: 0,
        },
        ws: null,
      }
    },
    filters: {
      // 服务类型过滤
      serveTypeFilter(data, that) {
        return that.dictServeOptions[data]
      },
    },
    created() {
      this.startTime = moment().startOf('year').format('YYYY-MM-DD')
      this.endTime = moment().endOf('year').format('YYYY-MM-DD')
    //   this.initDictServe()
      this.getList()
      // this.ws_connect()
    },
    methods: {
      cancel(ids){
        let param = {ids:ids}
        getAction(this.url.cancel, param).then((res) => {
          if (res.success) {
             this.getList()
          }
        })
      },
      add(){
         console.log('hello')  
      },
      // 获取列表数据
      getList() {
        this.loading = true
        getAction(this.url.acceptanceList, this.queryParams).then((res) => {
          if (res.success) {
            this.total = res.result.total || 0
            this.pageTotal = Math.ceil(this.total / this.queryParams.pageSize)
            this.tableData = res.result.records
            this.loading = false
          }
        })
        // this.getNumber()
      },
      ws_connect: function () {
        let _this = this
        let windowInfo = this.$store.state.user.windowInfo
        // console.log(windowInfo)
        let ws_url =
          window._CONFIG['domianURL'].replace('https://', 'wss://').replace('http://', 'ws://') +
          '/jeecg-cloud-system-start/websocket/window_'+windowInfo.id
        if ('WebSocket' in window) {
          this.ws = new WebSocket(ws_url)
        } else if ('MozWebSocket' in window) {
          this.ws = new MozWebSocket(ws_url)
        } else {
          console.log('Error: 此浏览器不支持WebSocket!')
          return
        }
        //webSocket建立连接
        this.ws.onopen = function () {
          console.log('WebSocket已经建立连接!')
        }
        //webSocket关闭
        this.ws.onclose = function () {
          console.log('WebSocket已经关闭!')
          setTimeout(() => {
            _this.ws_connect()
          }, 2000)
        }
        //webSocket返回消息
        this.ws.onmessage = function (message) {
          console.log('webSocket返回消息:' , message)
          _this.getList()
        }
      },
      getNumber() {
        getAction(this.url.getNumber, this.queryParams).then((res) => {
          // console.log(res)
          if (res.success) {
            this.serviceNum = res.result
          }
        })
      },
      //获取服务类型字典
      initDictServe() {
        //优先从缓存中读取字典配置
        if (getDictItemsFromCache('service_type')) {
          getDictItemsFromCache('service_type').forEach((item) => {
            this.dictServeOptions[item.value] = item.text
          })
          // console.log(this.dictServeOptions);
          return
        }
  
        //根据字典Code, 初始化字典数组
        ajaxGetDictItems('service_type', null).then((res) => {
          if (res.success) {
            res.result.forEach((item) => {
              this.dictServeOptions[item.value] = item.text
            })
          }
        })
      },
      //日期选择
      changeTime(e, i) {
        if (e == '今日') {
          this.startTime = moment().format('YYYY-MM-DD')
          this.endTime = moment().format('YYYY-MM-DD')
        } else if (e == '本周') {
          this.startTime = moment().startOf('week').format('YYYY-MM-DD')
          this.endTime = moment().endOf('week').format('YYYY-MM-DD')
        } else if (e == '本月') {
          this.startTime = moment().startOf('month').format('YYYY-MM-DD')
          this.endTime = moment().endOf('month').format('YYYY-MM-DD')
        } else if (e == '全年') {
          this.startTime = moment().startOf('year').format('YYYY-MM-DD')
          this.endTime = moment().endOf('year').format('YYYY-MM-DD')
        }
        this.queryParams.startApplicationTime = this.startTime + ' 00:00:00'
        this.queryParams.endApplicationTime = this.endTime + ' 23:59:59'
        this.activeCate = i
      },
      onChangeTime(date, dateString) {
        this.startTime = dateString[0]
        this.endTime = dateString[1]
        if (dateString[0] != '') {
          this.queryParams.startApplicationTime = dateString[0] + ' 00:00:00'
          this.queryParams.endApplicationTime = dateString[1] + ' 23:59:59'
        } else {
          this.queryParams.startApplicationTime = null
          this.queryParams.endApplicationTime = null
        }
      },
      // 分页
      //改变页码
      changeNum(page, pageSize) {
        this.queryParams.pageNo = page
        this.getList()
      },
      //改变页数
      changePage(current, size) {
        this.queryParams.pageSize = size
        this.getList()
      },
      goConfig(text) {
        // this.acceptanceItem = text
        // this.visible = true
        getAction(this.url.state, {
          acceptId: text.id,
          flowStatus: ++text.flowStatus,
          // opRemark: this.form2.remark,
        }).then((res) => {
          if (res.success) {
            // this.visible = false
            // this.form2 = {}
            this.getList()
            this.$message.success('操作成功')
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      //子组件方法
      goBack(val) {
        // console.log(val)
        this.showServeConfig = !this.showServeConfig
      },
      //搜索
      search() {
        this.queryParams.pageNo = 1
        this.getList()
      },
      // 展开
      expand(flag, e) {
        console.log(flag, e)
      },
      //重置
      reset() {
        this.queryParams = {
          pageNo: 1,
          pageSize: 10,
          code: null,
          type: null,
          site: null
        }
        let thisyear = new Date().getFullYear()
        this.startTime = thisyear + '-1-1'
        this.endTime = thisyear + '-12-31'
        this.activeCate = -1
        this.deStatus = undefined
        this.getList()
      },
      // 状态
      flowStatusChange(val) {
        this.queryParams.flowStatusList = val
      },
      callback(key) {
        this.queryParams.status = key == '3' ? '0,1,2' : key
        this.getList()
      },
    },
  }
  </script>
  
  <style lang="less" scoped>
  @import '~@assets/less/shaDow.less';
  
  .container {
    background: #ffffff;
    position: relative;
    padding: 0px 31px;
  
    .highSearchBtn {
      width: 100px;
      height: 36px;
      position: absolute;
      top: 8px;
      right: 30px;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      border-width: 1px;
      border-style: solid;
      border-color: rgba(217, 217, 217, 1);
      border-radius: 2px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      font-family: 'PingFangSC-Regular', 'PingFang SC';
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.647058823529412);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  
    .searchTable {
      width: 100%;
      margin-top: 20px;
      // height: 141px;
      background: inherit;
      background-color: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      // border-width: 1px;
      // border-style: solid;
      // border-color: rgba(224, 230, 240, 1);
      border-radius: 0px;
      border-bottom: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
  
      // 搜索项
      .ant-advanced-search-form {
        .ant-form-item {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 16px;
        }
  
        ::v-deep .ant-form-item-label {
          // width: 18%;
          white-space: inherit;
        }
  
        ::v-deep .ant-form-item-control-wrapper {
          width: 85%;
          // padding-left: 15px;
        }
  
        ::v-deep .ant-form-item-children {
          display: flex;
        }
  
        .apply {
          display: flex;
  
          .apply_time {
            display: flex;
            align-items: center;
            margin-right: 10px;
  
            .check_time {
              width: 45px;
              height: 24px;
              line-height: 24px;
              display: block;
              font-family: 'PingFangSC-Regular', 'PingFang SC';
              font-weight: 400;
              font-style: normal;
              font-size: 14px;
              cursor: pointer;
              border-radius: 5px;
              margin-right: 2px;
            }
  
            .active {
              background-color: #1890ff;
              color: #ffffff;
            }
          }
        }
      }
  
      .ant-input {
        // width: 580px;
        height: 32px;
      }
  
      ::v-deep .ant-form-item-label label {
        font-family: 'PingFangSC-Regular', 'PingFang SC';
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        text-align: right;
        line-height: 28px;
        width: 125px;
        display: inline-block;
        margin-right: 28px;
      }
  
      ::v-deep .ant-divider-horizontal {
        min-width: 98%;
        width: 99%;
        margin: 11px 0;
      }
  
      // 搜索按钮
      .searchBtns {
        width: 100%;
        height: 58px;
        display: flex;
        justify-content: center;
        align-items: center;
  
        .ant-btn {
          width: 73px;
          height: 30px;
          font-size: 14px;
          // color: #ffffff;
          text-align: center;
          line-height: 22px;
          margin-right: 10px;
          padding-left: 10px;
        }
      }
    }
  
    .list {
      ::v-deep .ant-table-thead > tr > th {
        padding-left: 5px;
        font-size: 16px;
        color: #000;
        background: #f5faff !important;
        border-radius: 0;
      }
  
      // 当表格数据为空时，修改.ant-empty-normal样式，会撑高空白样式
      ::v-deep.ant-table {
        min-height: 1.9% !important;
      }
  
      ::v-deep tr {
        height: 34px !important;
        padding: 0px !important;
        font-size: 13px !important;
        color: #000;
      }
  
      ::v-deep td {
        height: 34px !important;
        padding: 0px !important;
        font-size: 13px !important;
        color: #000;
      }
  
      ::v-deep th {
        height: 34px !important;
        padding: 0px !important;
        font-size: 13px !important;
        color: #000;
      }
  
      ::v-deep td:nth-child(2) {
        padding: 0px 0px 0px 10px !important;
      }
  
      .myPagination {
        padding: 24px 0;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
  
        ::v-deep .ant-pagination-total-text {
          color: rgba(0, 0, 0, 0.427450980392157);
        }
      }
  
      ::v-deep .ant-table-align-left {
        text-align: center !important;
      }
  
      .expand {
        color: #1890ff;
      }
  
      .table_line {
        margin: 0 4px;
        background: #1890ff;
      }
    }
  
    .green {
      color: #52c41a;
    }
  
    .red {
      color: #ff0000;
    }
  
    .yellow {
      color: #faad14;
    }
  
    // 标签页样式
    .tab {
      margin-top: 28px;
      padding: 0 10px;
      ::v-deep .ant-tabs-bar {
        border-bottom: 1px solid rgb(44, 140, 240);
      }
      ::v-deep .ant-tabs {
        overflow: visible;
      }
      ::v-deep .ant-tabs-tab {
        width: 100px;
        text-align: center;
        color: rgb(44, 140, 240);
        background: #fff;
        border: 1px solid rgb(44, 140, 240);
      }
      ::v-deep .ant-tabs-tab-active {
        color: #fff !important;
        background-color: rgb(44, 140, 240);
      }
      .list {
        margin: 0 -10px;
        ul {
          // margin: 0;
          padding: 0;
          li {
            display: flex;
            justify-content: space-between;
            // margin: 20px 0;
            padding: 20px 10px;
            .left {
              // width: 80%;
              .type {
                font-weight: 400;
                font-style: normal;
                font-size: 18px;
                color: rgb(44, 140, 240);
                margin-bottom: 8px;
                cursor: pointer;
  
                .title {
                  margin-left: 5px;
                }
                .notitle {
                  margin-left: 5px;
                  color: #000;
                }
              }
            }
            .right {
              width: 250px;
              text-align: start;
              .serve_promise {
                margin-bottom: 15px;
              }
              .time {
                color: rgb(44, 140, 240);
                margin-right: 2px;
              }
            }
          }
          .checked {
            border: 1px solid rgb(186, 231, 255);
            background-color: rgba(230, 247, 255, 0.298);
            border-radius: 4px;
          }
        }
        img {
          width: 180px;
          margin: 0 auto;
          display: block;
        }
      }
    }
  }
  
  .mrt_10 {
    margin-top: 10px;
    padding-top: 32px;
  }
  
  // 弹框
  ::v-deep .ant-modal-title {
    position: relative;
    padding-left: 48px;
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
  }
  
  // ::v-deep .ant-modal-body {
  //   padding: 0 24px 24px;
  // }
  
  ::v-deep .ant-modal-title::before {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 24px;
    height: 25px;
    // background-image: url(../../../../assets/window/u2.png);
    background-size: 100% 100%;
  }
  
  .lzbz {
    ::v-deep .ant-modal-footer {
      border-top: 0;
    }
  }
  ::v-deep .ant-tabs-bar {
    position: relative;
    .ant-tabs-extra-content {
      position: absolute;
      left: 0;
      // z-index: 10;
      .tabBox {
        padding-left: 110px;
        .ant-badge {
          margin-right: 10px;
        }
        .tabItem {
          width: 100px;
          height: 40px;
        }
      }
    }
  }
  </style>