<template>
  <div>
    <el-card class="el-card">
      <el-descriptions class="margin-top" title="单据上传设置" :column="1" 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">
            <el-col :span="6" class="el-col">

              <el-switch
                v-model="configQuery.autoUpload"
                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">
            <el-col :span="20" class="el-col">
              <div>
                <span>单据上传时间间隔(单位:分钟):&nbsp;</span>
                <el-input
                  style="width: 100px"
                  size="small"
                  type="number" min="10"
                  v-model="configQuery.orderSyncTime"
                  :disabled="configQuery.autoUpload"
                  splaceholder="请输入内容"
                ></el-input>

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

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


      <div style="float: right;margin-bottom: 10px;margin-right: 25px;margin-top: 18px">
        <el-button type="primary" size="small"
                   :disabled="configQuery.autoUpload"
                   @click="addBusTypeDialog()">添加扫码单据类型
        </el-button>
      </div>
      <el-table
        :data="checkedBusTypes"
        border
        style="width: 100%"
        highlight-current-row
      >
        <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
          label="单据状态"
          prop="orderStatus"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag>{{ statusMap[scope.row.orderStatus] }}</el-tag>
          </template>

        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.stop="printUpload(scope.row)"
            >编辑
            </el-button
            >
            <el-button
              type="text"
              size="small"
              @click.native="removeBus(scope.$index, scope.row)"
            >移除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      title="单据上传设置编辑"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="Updocument"
      width="50%"

    >
      <modifyDialog :inputQuery="inputQuery"></modifyDialog>
      <div style="text-align: center; margin-top: 10px;">
        <el-button type="primary" size="small" icon="search" @click="onModifySubmit"
        >提交
        </el-button
        >
        <el-button type="primary" size="small" icon="search" @click="cancelDialog"
        >取消
        </el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="添加扫码单据类型"
      :visible.sync="addBusDialogVisible"
      width="60%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-if="addBusDialogVisible"
    >
      <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>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="busQuery.page"
        :limit.sync="busQuery.limit"
        @pagination="getBuType"
      />
    </el-dialog>

  </div>
</template>

<script>
import modifyDialog from "./uploadModify";
import {getBusTypeList} from "@/api/basic/busType";
import {addBus, editBus, getBusList, getConfig, removeBus, saveConfig, updateConfig} from "@/api/thrsys/thrUploadSet";
import {isBlank} from "@/utils/strUtil";
import {filterListInvoice} from "@/api/inout/orderDetailBiz";
import {updateBasicThirdSys} from "@/api/thrsys/basicThirdSys";
import modifyDetailDialog from "@/views/thirdSys/api/BasicThirdSysDetailModify";
import DialogEditBusUpload from "@/views/thirdSys/api/DialogEditBusUpload";
import DialogEditBusDown from "@/views/thirdSys/api/DialogEditBusDown";

export default {
  name: "uploadSetting",
  data() {
    return {
      configQuery: {
        autoUpload: null,
        orderSyncTime: null,
        orderStartTime: null,
        orderUnCheck: null,
        orderUnReceive: null,
        orderScanFinish: null,
        checkWebNew: null,
        checkPdaUn: null,
        checkPdaEd: null,
        checkUdims: null,
        checkPc: null,
        checkSp: null,
        checkChange: null,
        checkBalacne: null,
        orderSources: [],
        busTypes: []
      },
      checkedBusTypes: [],
      busQuery: {
        enable: true,
        page: 1,
        limit: 10
      },
      Updocument: false,
      inputQuery: null,
      loading: false,
      list: [],
      total: 0,
      busTypes: [],
      addBusDialogVisible: false,
      multipleSelection: [],
      statusMap: {
        1: "未审核",
        2: "已审核",
        3: "已确认",
      },
    };
  },
  methods: {
    saveConfig() {
      this.$confirm('是否确认修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      }).then(() => {
        if (this.checkedBusTypes != null) {
          this.configQuery.busTypes = this.checkedBusTypes;
        }
        saveConfig(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(() => {
      });
    },
    addBusTypeDialog() {
      this.addBusDialogVisible = true;
      this.multipleSelection = [];
    },

    //单据编辑
    printUpload(row) {
      this.Updocument = true;
      this.inputQuery = row;

    },
    onModifySubmit() {
      editBus(this.inputQuery)
        .then((response) => {
          if (response.code == 20000) {
            this.getSelectBus();
            this.Updocument = false;
            this.$message.success(response.data);
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
          this.cancelDialog();
        });
    },
    //取消
    cancelDialog() {
      this.getBuType();
      this.Updocument = false;
      // this.modifyBusYypeDialogVisible = false;
    },


    //删除
    removeBus(index, row) {
      let query = {
        id: row.id,
      }
      removeBus(query).then((res) => {
        if (res.code == 20000) {
          this.getSelectBus();
        } else {
          this.$message.error(response.message);
        }
      }).catch((error) => {
        this.loading = false;
      });

    },


    getBuType() {
      getBusTypeList(this.busQuery).then((res) => {
        this.busTypes = res.data.list || [];
        this.total = res.data.total || 0;
        this.getConfig();
      }).catch(() => {
      });
    },

    //获取已选入单据类型
    getSelectBus() {
      getBusList().then((res) => {
        if (res.code == 20000)
          this.checkedBusTypes = res.data;
      }).catch((error) => {
        this.loading = false;
      });
    },
    getConfig() {
      getConfig().then((res) => {
        this.configQuery = res.data;
      }).catch((error) => {
        this.loading = false;
      });
    },
    addBusType() {
      let selectedData = this.multipleSelection;

      selectedData.forEach(item => {
        item.id = null
      });
      this.addBusDialogVisible = false;
      let query = {
        busTypes: selectedData,
      };
      addBus(query).then((res) => {
        if (res.code == 20000) {
          this.checkedBusTypes = this.res.data;
        } else {
          this.$message.error(res.message);
        }
      }).catch((error) => {
        this.loading = false;
      })

    },
    handleCheckedChange(row) {
      this.multipleSelection = row;
    },
    checkSelectable(row) {
      return !row.isSelect
    },
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        false: "success",
        true: "warning",
      };
      return statusMap[status];
    },
  },
  components: {
    modifyDialog
  },
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  created() {
    this.getBuType();
    this.getSelectBus();
  },
};
</script>

<style type="text/scss" lang="scss">
</style>

