<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>

      <el-descriptions class="margin-top" title="上传至第三方系统" :column="1" style="margin-top: 30px"
                       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-date-picker
                  type="date"
                  v-model="configQuery.orderStartTime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :disabled="configQuery.autoUpload"
                  placeholder="选择日期">
                </el-date-picker>
              </div>
            </el-col>
          </el-row>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            单据(单据状态)
          </template>
          <el-checkbox v-model="configQuery.orderUnCheck" :disabled="configQuery.autoUpload">待校验单据
          </el-checkbox>
          <el-checkbox v-model="configQuery.orderUnReceive" :disabled="configQuery.autoUpload">未验收单据
          </el-checkbox>
          <el-checkbox v-model="configQuery.orderScanFinish" :disabled="configQuery.autoUpload">已完成单据
          </el-checkbox>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            单据来源
          </template>
          <el-checkbox v-model="configQuery.checkWebNew">web端新增单据
          </el-checkbox>
          <el-checkbox v-model="configQuery.checkPdaUn">手持终端未校验单据
          </el-checkbox>
          <el-checkbox v-model="configQuery.checkPdaEd">手持终端已校验单据
          </el-checkbox>
          <el-checkbox v-model="configQuery.checkUdims">UDIMS平台
          </el-checkbox>
          <el-checkbox v-model="configQuery.checkPc">UDI扫码通</el-checkbox>
          <el-checkbox v-model="configQuery.checkSp">自助平台同步</el-checkbox>
          <el-checkbox v-model="configQuery.checkChange">缺量补单
          </el-checkbox>
          <el-checkbox v-model="configQuery.checkBalacne">平衡补单
          </el-checkbox>
        </el-descriptions-item>

        <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.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="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click.native="removeBus(scope.$index, scope.row)"
                >移除
                </el-button
                >
              </template>
            </el-table-column>
          </el-table>

        </el-descriptions-item>

      </el-descriptions>
    </el-card>

    <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 {getBusTypeList} from "@/api/basic/busType";
import {getConfig, saveConfig} from "@/api/thrsys/thrUploadSet";

const formJson = {
  site_id: "",
  site_name: "",
  describe: "",
  ads: [],
};

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,
        busTypes: []
      },
      checkedBusTypes: [],
      busQuery: {
        enable: true,
        page: 1,
        limit: 10
      },
      loading: false,
      list: [],
      total: 0,
      busTypes: [],
      addBusDialogVisible: false,
      multipleSelection: []
    };
  },
  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 = [];
    },
    removeBus(index, row) {
      this.checkedBusTypes.splice(index, 1);
    },
    getBuType() {
      getBusTypeList(this.busQuery).then((res) => {
        this.busTypes = res.data.list || [];
        this.total = res.data.total || 0;
        this.getConfig();
      }).catch(() => {
      });
    },
    getConfig() {
      getConfig().then((res) => {
        this.configQuery = res.data;
        this.checkedBusTypes = this.configQuery.busTypes;
        if (this.configQuery.busTypes === null) {
          this.$message.error(res.message);
        }
      }).catch((error) => {
        this.loading = false;
        this.list = [];
        this.total = 0;
      })
    },
    addBusType() {
      let selectedData = this.multipleSelection;
      selectedData.forEach((item) => {
        item.outChange = false;
        this.checkedBusTypes.push(item);
      })
      this.addBusDialogVisible = false;
    },
    handleCheckedChange(row) {
      this.multipleSelection = row;
    },
    checkSelectable(row) {
      return !row.isSelect
    },
  },
  filters: {
    statusFilterType(status) {
      const statusMap = {
        false: "success",
        true: "warning",
      };
      return statusMap[status];
    },
  },
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  created() {
    this.getBuType();
  },
};
</script>

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

