<template>
  <el-card>
    <el-collapse v-model="activeNames">
      <!-- 数据同步设置 -->
      <el-collapse-item title="数据同步设置" name="1">
        <el-descriptions class="margin-top" :column="1" :size="100" border>
          <template slot="extra">
            <el-button type="primary" size="small" @click="saveConfig()"
            >保存
            </el-button
            >
          </template>
          <el-descriptions-item>
            <template slot="label"> 同步服务</template>
            <el-row :gutter="20" class="el-row" type="flex">
              <el-col :span="6" class="el-col">
                <el-switch
                  v-model="configQuery.downstreamEnable"
                  active-text="是否启用数据同步"
                >
                </el-switch>
              </el-col>
              <el-col :span="14" class="el-col">
                <div>
                  <span style="color: red"
                  >说明:&nbsp;修改同步参数时,请关闭数据同步服务
                  </span>
                </div>
              </el-col>
            </el-row>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 地址设置</template>

            <el-row :gutter="20" class="el-row" type="flex">
              <el-col :span="20" class="el-col">
                <div>
                  <span>服务地址:&nbsp;</span>
                  <el-input
                    style="width: 50%"
                    size="small"
                    v-model="configQuery.syncIp"
                    :disabled="configQuery.downstreamEnable"
                    splaceholder="请输入内容"
                  ></el-input>
                  <el-button
                    type="primary"
                    size="small"
                    @click="testConnect()"
                    style="margin-left: 20px"
                    :disabled="configQuery.downstreamEnable"
                    :loading="testLoading"
                  >连通性测试
                  </el-button>
                </div>
              </el-col>
            </el-row>
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <!-- 上传值UDI自助平台基础数据 -->
      <el-collapse-item title="基础数据同步" name="2">
        <el-descriptions class="margin-top" :column="1" :size="100" border>
          <!-- 参数设置 -->
          <el-descriptions-item>
            <template slot="label"> 参数设置</template>
            <el-form
              label-positiom="right"
              label-width="200px"
              :inline="true"
            >
              <el-form-item label="数据上传时间间隔(单位:分钟):" style="padding-top: 20px">
                <el-input
                  style="width: 100px"
                  size="small"
                  type="number"
                  v-model="configQuery.syncTime"
                  splaceholder="请输入内容"
                ></el-input>
              </el-form-item>
              <!--              <el-form-item label="延时上传(单位:分钟):">-->
              <!--                <el-input-->
              <!--                  style="width: 100px"-->
              <!--                  size="small"-->
              <!--                  type="number"-->
              <!--                  v-model="configQuery.delaySyncTime"-->
              <!--                  splaceholder="请输入内容"-->
              <!--                ></el-input>-->
              <!--              </el-form-item>-->
              <el-form-item label="数据下载时间间隔(单位:分钟):" style="padding-top: 20px">
                <el-input
                  style="width: 100px"
                  size="small"
                  type="number"
                  v-model="configQuery.syncDownloadTime"
                  splaceholder="请输入内容"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-descriptions-item>
          <!-- 系统设置信息 -->
          <el-descriptions-item>
            <template slot="label"> 系统设置信息</template>
            <el-form label-positiom="right" label-width="200px" :inline="true">
              <el-form-item label="系统运行参数">
                <el-select v-model="configQuery.systemConfig">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="委托验收">
                <el-select v-model="configQuery.entrustAction">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="打印设置">
                <el-select v-model="configQuery.printConfig">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-form label-positiom="right" label-width="200px" :inline="true">
              <el-form-item label="自动建出入库单设置">
                <el-select v-model="configQuery.scanChangeConfig">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="自动建业务单设置">
                <el-select v-model="configQuery.busChangeConfig">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-descriptions-item>
          <!-- 单据类型 -->
          <el-descriptions-item>
            <template slot="label"> 单据类型</template>
            <el-form label-positiom="right" label-width="200px" :inline="true" style="padding-top: 20px">
              <el-form-item label="业务单据类型">
                <el-select v-model="configQuery.typeBus">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="扫码单据类型">
                <el-select v-model="configQuery.typeScan">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="第三方单据类型">
                <el-select v-model="configQuery.typeThird">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-descriptions-item>
          <!-- 用户信息 -->
          <el-descriptions-item>
            <template slot="label"> 用户信息</template>
            <el-form label-positiom="right" label-width="200px" :inline="true" style="padding-top: 20px">
              <el-form-item label="部门信息">
                <el-select v-model="configQuery.basicDept">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="仓库字典">
                <el-select v-model="configQuery.basicInv">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="用户信息">
                <el-select v-model="configQuery.sysUser">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-descriptions-item>
          <!-- 基础数据 -->
          <el-descriptions-item>
            <template slot="label"> 基础数据</template>
            <el-form label-positiom="right" label-width="200px" :inline="true" style="padding-top: 20px">
              <el-form-item label="耗材字典">
                <el-select v-model="configQuery.basicProducts">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="往来单位字典">
                <el-select v-model="configQuery.basicCorp">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="首营资质信息">
                <el-select v-model="configQuery.supCert">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 其他数据</template>
            <el-form label-positiom="right" label-width="200px" :inline="true" style="padding-top: 20px">
              <el-form-item label="UDI码补齐数据">
                <el-select v-model="configQuery.udiCodeLost">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="UDI关联关系">
                <el-select v-model="configQuery.udiCodeRel">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发票信息">
                <el-select v-model="configQuery.orderInvoice">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-descriptions-item>

          <!-- 第三方基础信息 -->
          <el-descriptions-item>
            <template slot="label"> 第三方基础信息</template>
            <el-form label-positiom="right" label-width="200px" :inline="true" style="padding-top: 20px">
              <el-form-item label="第三方产品信息">
                <el-select v-model="configQuery.basicThirdProducts">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="第三方往来信息">
                <el-select v-model="configQuery.basicThirdCorp">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="第三方仓库信息">
                <el-select v-model="configQuery.basicThirdInv">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="第三方业务单据">
                <el-select v-model="configQuery.basicThirdBusOrder">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-descriptions-item>
          <!-- 国家库DI数据 -->
          <el-descriptions-item>
            <template slot="label"> 国家库DI数据</template>
            <el-form label-positiom="right" label-width="200px" :inline="true" style="padding-top: 20px">
              <el-form-item label="DI产品信息">
                <el-select v-model="configQuery.dbDiProducts">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="医疗器械注册人">
                <el-select v-model="configQuery.dbDiCompany">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-descriptions-item>
          <!-- 设备管理数据 -->
          <el-descriptions-item>
            <template slot="label">设备管理数据</template>
            <el-form label-positiom="right" label-width="200px" :inline="true" style="padding-top: 20px">
              <el-form-item label="基础设备数据">
                <el-select v-model="configQuery.deviceInfo">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="巡检设备管理">
                <el-select v-model="configQuery.deviceCheck">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="报修设备管理">
                <el-select v-model="configQuery.deviceRepairApply">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="保养设备管理">
                <el-select v-model="configQuery.deviceUpkeep">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <!-- <el-checkbox v-model="configQuery.dbDiProducts">DI产品信息</el-checkbox>
        <el-checkbox v-model="configQuery.dbDiProducts"
          >医疗器械注册人</el-checkbox
        > -->
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">生产企业数据</template>
            <el-form label-positiom="right" label-width="200px" :inline="true" style="padding-top: 20px">
              <el-form-item label="生产企业数据">
                <el-select v-model="configQuery.produceBusiness">
                  <el-option :value="0" label="不同步"></el-option>
                  <el-option :value="1" label="由内向外"></el-option>
                  <el-option :value="2" label="由外向内"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>

      <!--UDI自助平台同步至UDI管理系统扫码单据  -->
      <el-collapse-item title="UDI自助平台同步至UDI管理系统扫码单据" name="3">
        <el-descriptions
          class="margin-top"
          :column="1"
          :size="100"
          style="margin-top: 40px"
          border
        >
          <el-descriptions-item>
            <template slot="label"> 参数设置</template>

            <el-row :gutter="20" class="el-row" type="flex">
              <el-col :span="20" class="el-col">
                <div>
                  <span>单据上传时间间隔(单位:分钟):&nbsp;</span>
                  <el-input
                    style="width: 100px"
                    size="small"
                    type="number"
                    v-model="configQuery.orderToInSyncTime"
                    splaceholder="请输入内容"
                  ></el-input>
                </div>
              </el-col>

            </el-row>
          </el-descriptions-item>

          <el-descriptions-item
            label="单据(单据类型)"
            label-style="width: 150px"
          >
            <div style="float: left; margin-bottom: 10px; margin-right: 25px">
              <el-form :model="selectedToInBusTypesQuery" ref="queryForm" size="mini" :inline="true">
                <el-form-item label="单据类型:" prop="name">
                  <el-input
                    v-model="selectedToInBusTypesQuery.name"
                    placeholder="请输入单据类型名称"
                    clearable
                    @keyup.enter.native="querySeletedToInBus"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button-group>
                    <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetSeletedToInBus">重置</el-button>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="querySeletedToInBus">查询</el-button>
                  </el-button-group>
                </el-form-item>
              </el-form>
            </div>
            <div style="float: right; margin-bottom: 10px; margin-right: 25px">
              <el-button
                type="primary"
                size="small"
                :disabled="configQuery.downstreamEnable"
                @click="addToInBusTypeDialog()"
              >添加扫码单据类型
              </el-button>
            </div>
            <el-table :data="checkedToInBusTypes" border style="width: 100%">
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column
                label="单据类型"
                prop="name"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="单据类型代码"
                prop="action"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column width="180" label="单据状态">
                <template slot-scope="scope">
                  <el-select
                    style="width: 80%"
                    v-model="scope.row.orderStatus"
                    placeholder="请选择单据状态"
                  >
                    <el-option label="待校验" :value="3">待校验</el-option>
                    <el-option label="待核对" :value="5">待核对</el-option>
                    <el-option label="待审核" :value="10">待审核</el-option>
                    <el-option label="已审核" :value="7">已审核</el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column width="180" label="目标单据状态">
                <template slot-scope="scope">
                  <el-select style="width: 90%"
                             v-model="scope.row.syncStatus"
                  >
                    <el-option label="草稿" :value="1">草稿</el-option>
                    <el-option label="待审核" :value="3">待审核</el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column width="180" label="是否自动补单">
                <template slot-scope="scope">
                  <el-select style="width: 90%"
                             v-model="scope.row.syncChange"
                  >
                    <el-option label="是" :value="true">是</el-option>
                    <el-option label="否" :value="false">否</el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    :disabled="configQuery.downstreamEnable"
                    @click.native="removeToInBus(scope.$index, scope.row)"
                  >移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <!-- UDI管理系统同步至UDI自助平台扫码单据 -->
      <el-collapse-item title="UDI管理系统同步至UDI自助平台扫码单据" name="4">
        <el-descriptions
          class="margin-top"
          :column="1"
          :size="100"
          style="margin-top: 40px"
          border
        >
          <el-descriptions-item>
            <template slot="label"> 参数设置</template>

            <el-row :gutter="20" class="el-row" type="flex">
              <el-col :span="20" class="el-col">
                <div>
                  <span>单据上传时间间隔(单位:分钟):&nbsp;</span>
                  <el-input
                    style="width: 100px"
                    size="small"
                    type="number"
                    v-model="configQuery.orderSyncTime"
                    :disabled="configQuery.downstreamEnable"
                    splaceholder="请输入内容"
                  ></el-input>
                  <!--                  <span style="margin-left: 30px"-->
                  <!--                  >单据下载时间间隔(单位:分钟):&nbsp;</span-->
                  <!--                  >-->
                  <!--                  <el-input-->
                  <!--                    style="width: 100px"-->
                  <!--                    size="small"-->
                  <!--                    type="number"-->
                  <!--                    v-model="configQuery.orderSyncDlTime"-->
                  <!--                    :disabled="configQuery.downstreamEnable"-->
                  <!--                    splaceholder="请输入内容"-->
                  <!--                  ></el-input>-->

                </div>
              </el-col>
            </el-row>
          </el-descriptions-item>

          <el-descriptions-item
            label="单据(单据类型)"
            label-style="width: 150px"
          >
            <div style="float: left; margin-bottom: 10px; margin-right: 25px">
              <el-form :model="selectedBusTypesQuery" ref="queryForm" size="mini" :inline="true">
                <el-form-item label="单据类型:" prop="name">
                  <el-input
                    v-model="selectedBusTypesQuery.name"
                    placeholder="请输入单据类型名称"
                    clearable
                    @keyup.enter.native="querySeletedBus"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button-group>
                    <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetSeletedBus">重置</el-button>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="querySeletedBus">查询</el-button>
                  </el-button-group>
                </el-form-item>
              </el-form>
            </div>
            <div style="float: right; margin-bottom: 10px; margin-right: 25px">
              <el-button
                type="primary"
                size="small"
                :disabled="configQuery.downstreamEnable"
                @click="addBusTypeDialog()"
              >添加扫码单据类型
              </el-button>
            </div>
            <el-table :data="checkedBusTypes" border style="width: 100%">
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column
                label="单据类型"
                prop="name"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="单据类型代码"
                prop="action"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column width="180" label="单据状态">
                <template slot-scope="scope">
                  <el-select
                    style="width: 80%"
                    v-model="scope.row.orderStatus"
                    placeholder="请选择单据状态"
                  >
                    <el-option label="待校验" :value="3">待校验</el-option>
                    <el-option label="待核对" :value="5">待核对</el-option>
                    <el-option label="待审核" :value="10">待审核</el-option>
                    <el-option label="已审核" :value="7">已审核</el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column width="180" label="目标单据状态">
                <template slot-scope="scope">
                  <el-select style="width: 90%"
                             v-model="scope.row.syncStatus"
                  >
                    <el-option label="草稿" :value="1">草稿</el-option>
                    <el-option label="待审核" :value="3">待审核</el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column width="180" label="是否自动补单">
                <template slot-scope="scope">
                  <el-select style="width: 90%"
                             v-model="scope.row.syncChange"
                  >
                    <el-option label="是" :value="true">是</el-option>
                    <el-option label="否" :value="false">否</el-option>
                  </el-select>
                </template>
              </el-table-column>

              <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    :disabled="configQuery.downstreamEnable"
                    @click.native="remveBus(scope.$index, scope.row)"
                  >移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <!-- UDI管理系统同步至UDI自助平台业务单据  -->
      <el-collapse-item title="UDI管理系统同步至UDI自助平台业务单据" name="5">
        <el-descriptions
          class="margin-top"
          :column="1"
          :size="100"
          style="margin-top: 40px"
          border
        >
          <el-descriptions-item
            label="单据(单据类型)"
            label-style="width: 150px"
          >
            <div style="float: right; margin-bottom: 10px; margin-right: 25px">
              <el-button
                type="primary"
                size="small"
                :disabled="configQuery.downstreamEnable"
                @click="addChangeBusTypeDialog()"
              >添加业务单据类型
              </el-button>
            </div>
            <el-table :data="checkedChangeBusTypes" border style="width: 100%">
              <el-table-column label="序号" type="index"></el-table-column>
              <el-table-column
                label="单据类型"
                prop="name"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                label="单据类型代码"
                prop="action"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column width="250" label="单据状态">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.orderStatus"
                    placeholder="请选择单据状态"
                  >
                    <el-option label="草稿" :value="1">草稿</el-option>
                    <el-option label="未审核" :value="2">未审核</el-option>
                    <el-option label="已审核" :value="3">已审核</el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    :disabled="configQuery.downstreamEnable"
                    @click.native="removeChangeBus(scope.$index, scope.row)"
                  >移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-dialog
        title="添加扫码单据类型"
        :visible.sync="addBusToInDialogVisible"
        width="55%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="addBusToInDialogVisible"
      >
        <div style="float: left; margin-bottom: 10px; margin-right: 25px">
          <el-form :model="busQuery" ref="queryForm" size="mini" :inline="true">
            <el-form-item label="单据类型:" prop="name">
              <el-input
                v-model="busQuery.name"
                placeholder="请输入单据类型名称"
                clearable
                @keyup.enter.native="getBusType"
              />
            </el-form-item>
            <el-form-item>
              <el-button-group>
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetBus">重置</el-button>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getBusType">查询</el-button>
              </el-button-group>
            </el-form-item>
          </el-form>
        </div>
        <div style="float: right; margin-bottom: 10px; margin-right: 25px">
          <el-button type="primary" size="small" @click="addToInBusType()"
          >选入
          </el-button
          >
        </div>
        <el-table
          :data="busTypes"
          border
          style="width: 100%"
          @selection-change="handleToInCheckedChange"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="checkSelectable"
          ></el-table-column>
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column
            label="单据类型"
            prop="name"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="单据类型代码"
            prop="action"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>

        <el-pagination
          :page-size="busQuery.limit"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
          :current-page="busQuery.page"
        ></el-pagination>
      </el-dialog>
      <el-dialog
        title="添加扫码单据类型"
        :visible.sync="addBusDialogVisible"
        width="55%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="addBusDialogVisible"
      >
        <div style="float: left; margin-bottom: 10px; margin-right: 25px">
          <el-form :model="busQuery" ref="queryForm" size="mini" :inline="true">
            <el-form-item label="单据类型:" prop="name">
              <el-input
                v-model="busQuery.name"
                placeholder="请输入单据类型名称"
                clearable
                @keyup.enter.native="getBusType"
              />
            </el-form-item>
            <el-form-item>
              <el-button-group>
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetBus">重置</el-button>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getBusType">查询</el-button>
              </el-button-group>
            </el-form-item>
          </el-form>
        </div>
        <div style="float: right; margin-bottom: 10px; margin-right: 25px">
          <el-button type="primary" size="small" @click="addBusType()"
          >选入
          </el-button
          >
        </div>
        <el-table
          :data="busTypes"
          border
          style="width: 100%"
          @selection-change="handleCheckedChange"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="checkSelectable"
          ></el-table-column>
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column
            label="单据类型"
            prop="name"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="单据类型代码"
            prop="action"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>

        <el-pagination
          :page-size="busQuery.limit"
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
          :current-page="busQuery.page"
        ></el-pagination>
      </el-dialog>

      <el-dialog
        title="添加业务单据类型"
        :visible.sync="addChangeBusDialogVisible"
        width="55%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-if="addChangeBusDialogVisible"
      >
        <div style="float: right; margin-bottom: 10px; margin-right: 25px">
          <el-button type="primary" size="small" @click="addChangeBusType()"
          >选入
          </el-button
          >
        </div>
        <el-table
          :data="changeBusTypes"
          border
          style="width: 100%"
          @selection-change="handleCheckedChangeBus"
        >
          <el-table-column
            type="selection"
            width="55"
            :selectable="checkSelectableChange"
          ></el-table-column>
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column
            label="单据类型"
            prop="name"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="单据类型代码"
            prop="action"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>

        <el-pagination
          :page-size="changeBusQuery.limit"
          @current-change="handleCurrentChangePage"
          layout="prev, pager, next"
          :total="changeBusTypeTotal"
          :current-page="changeBusQuery.page"
        ></el-pagination>
      </el-dialog>
    </el-collapse>
  </el-card>
</template>

<script>
import {
  findConfig,
  testConnect,
  updateConfig,
  getSelectedBussinessType,
  getSelectedToInBussinessType
} from "@/api/sync/spsSyncStatus";
import store from "@/store";
import {getBussinessType} from "@/api/basic/bussinessType";
import {getBusTypeChangeList} from "@/api/basic/busTypeChange";

export default {
  name: "SysUdimsConfig",
  data() {
    return {
      selectedBusTypesQuery: {
        name: null,
        page: 1,
        limit: null
      },
      selectedToInBusTypesQuery: {
        name: null,
        page: 1,
        limit: null
      },
      activeNames: ["2"],
      configQuery: {
        id: null,
        typeBus: null,
        typeScan: null,
        typeThird: null,
        basicProducts: null,
        basicCorp: null,
        basicInv: null,
        basicThirdProducts: null,
        basicThirdCorp: null,
        basicThirdInv: null,
        basicThirdBusOrder: null,
        orderScanFinish: null,
        dbDiProducts: null,
        dbDiCompany: null,
        downstreamEnable: null,
        syncIp: null,
        syncTime: null,
        syncDownloadTime: null,
        orderUnCheck: null,
        orderUnReceive: null,
        sysUser: null,
        orderToInSyncTime: null,
        orderSyncTime: null,
        orderSyncDlTime: null,
        delaySyncTime: null,
        busTypes: [],
        toInBusTypes: [],
        changeBusTypes: [],
        companyCert: null,
        manufacturerCert: null,
        productCert: null,
        basicDept: null,
        supCert: null,
        systemConfig: null,
        entrustAction: null,
        printConfig: null,
        scanChangeConfig: null,
        busChangeConfig: null,
        udiCodeLost: null,
        udiCodeRel: null,
        orderInvoice: null,
        deviceInfo:null,
        deviceCheck:null,
        deviceRepairApply:null,
        produceBusiness:null,
        deviceUpkeep:null,
      },
      checkedBusTypes: [],
      checkedToInBusTypes: [],
      checkedChangeBusTypes: [],
      busQuery: {
        name: null,
        page: 1,
        limit: 10,
      },
      busTypes: [],
      multipleSelection: [],
      toInSelecttions: [],
      addBusDialogVisible: false,
      addBusToInDialogVisible: false,
      total: 0,
      testLoading: false,
      addChangeBusDialogVisible: false,
      changeBusQuery: {
        page: 1,
        limit: 10,
      },
      changeBusTypeTotal: 0,
      changeBusTypes: [],
      changeBusTypeSelection: [],
    };
  },
  methods: {
    querySeletedBus(){
      getSelectedBussinessType(this.selectedBusTypesQuery)
        .then((response) => {
          this.checkedBusTypes = response.data.list || [];
        })
        .catch(() => {
        });
    },
    resetSeletedBus(){
      this.selectedBusTypesQuery = {
        name: null
      }
      this.getConfig()
    },
    querySeletedToInBus(){
      getSelectedToInBussinessType(this.selectedToInBusTypesQuery)
        .then((response) => {
          this.checkedToInBusTypes = response.data.list || [];
        })
        .catch(() => {
        });
    },
    resetSeletedToInBus(){
      this.selectedToInBusTypesQuery = {
        name: null
      }
      this.getConfig()
    },
    resetBus(){
      this.busQuery = {
          name: null,
          page: 1,
          limit: 10,
      },
      this.getBusType()
    },
    getConfig() {
      findConfig()
        .then((response) => {
          this.configQuery = response.data;
          this.checkedBusTypes = this.configQuery.busTypes;
          this.checkedToInBusTypes = this.configQuery.toInBusTypes;
          this.checkedChangeBusTypes = this.configQuery.changeBusTypes;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    saveConfig() {
      this.$confirm("是否确认修改?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          if (this.checkedBusTypes != null) {
            this.configQuery.busTypes = this.checkedBusTypes;
          }
          if (this.checkedChangeBusTypes != null) {
            this.configQuery.changeBusTypes = this.checkedChangeBusTypes;
          }
          if (this.checkedToInBusTypes != null) {
            this.configQuery.toInBusTypes = this.checkedToInBusTypes;
          }
          updateConfig(this.configQuery)
            .then((response) => {
              this.loading = false;
              if (response.code == 20000) {
                this.$message.success("修改成功！");
                this.getConfig();
              } else {
                this.$message.error(response.message);
              }
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {
        });
    },

    testConnect() {
      this.testLoading = true;
      testConnect()
        .then((response) => {
          this.testLoading = false;
          if (response.code == 20000) {
            this.$message.success("连接成功");
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.testLoading = false;
        });
    },

    handleCheckedChange(val) {
      this.multipleSelection = val;
    },

    handleToInCheckedChange(val) {
      this.toInSelecttions = val;
    },

    getBusType() {
      getBussinessType(this.busQuery)
        .then((response) => {
          this.busTypes = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
        });
    },

    addBusTypeDialog() {
      this.resetBus()
      this.addBusDialogVisible = true;
      this.multipleSelection = [];
    },

    addToInBusTypeDialog() {
      this.resetBus()
      this.addBusToInDialogVisible = true;
      this.toInSelecttions = [];
    },

    addToInBusType() {
      var selectData = this.toInSelecttions;
      selectData.forEach((obj) => {
        obj.outChange = false;
        obj.orderStatus = 7;
        obj.syncStatus = 3;
        obj.syncChange = false;
        obj.direct = 2;
        let isPut = true;
        for (let i = 0; i < this.checkedToInBusTypes.length; i++) {
          if (this.checkedToInBusTypes[i].action == obj.action) {
            isPut = false;
          }
        }
        if (isPut) this.checkedToInBusTypes.push(obj);
      });
      this.addBusToInDialogVisible = false;
    },

    addBusType() {
      var selectData = this.multipleSelection;
      selectData.forEach((obj) => {
        obj.outChange = false;
        obj.direct = 1;
        obj.orderStatus = 7;
        obj.syncStatus = 3;
        obj.syncChange = false;
        let isPut = true;
        for (let i = 0; i < this.checkedBusTypes.length; i++) {
          if (this.checkedBusTypes[i].action == obj.action) {
            isPut = false;
          }
        }
        if (isPut) this.checkedBusTypes.push(obj);
      });
      this.addBusDialogVisible = false;

    },
    remveBus(index, row) {
      this.checkedBusTypes.splice(index, 1);
    },

    removeToInBus(index, row) {
      this.checkedToInBusTypes.splice(index, 1);
    },

    checkSelectable(row) {
      return !row.isSelect;
    },
    handleCurrentChange(val) {
      this.busQuery.page = val;
      this.getBusType();
    },
    addChangeBusType() {
      let selectData = this.changeBusTypeSelection;
      selectData.forEach((obj) => {
        obj.outChange = false;
        obj.orderStatus = 3;
        let isPut = true;
        for (let i = 0; i < this.checkedChangeBusTypes.length; i++) {
          if (this.checkedChangeBusTypes[i].action == obj.action) {
            isPut = false;
          }
        }
        if (isPut) this.checkedChangeBusTypes.push(obj);
      });
      this.addChangeBusDialogVisible = false;
    },
    addChangeBusTypeDialog() {
      this.addChangeBusDialogVisible = true;
      this.changeBusTypeSelection = [];
      this.changeBusQuery.page = 1;
    },
    getChangeBusType() {
      getBusTypeChangeList(this.changeBusQuery).then((res) => {
        if (res.data.list.length > 0) {
          res.data.list.forEach((item) => {
            let changeBusType = {
              action: item.originAction,
              name: item.originName,
            };
            this.changeBusTypes.push(changeBusType);
          });
        }
        this.changeBusTypeTotal = res.data.total || 0;
      });
    },
    handleCurrentChangePage(val) {
      this.changeBusQuery.page = val;
      this.getChangeBusType();
    },
    handleCheckedChangeBus(val) {
      this.changeBusTypeSelection = val;
    },
    checkSelectableChange(row) {
      return !row.isSelect;
    },
    removeChangeBus(index, row) {
      this.checkedChangeBusTypes.splice(index, 1);
    },
  },
  created() {
    this.headers = {
      ADMINID: store.getters.adminId,
      ADMINTOKEN: store.getters.token,
    };

    this.getBusType();
    this.getChangeBusType();
    this.getConfig();
  },
};
</script>

<style scoped>
/deep/ .el-select {
  width: 100px;
}

/deep/ .el-collapse-item__header {
  font-size: 18px;
  font-weight: bold;
}
</style>
