<template>
  <div class="PostDelivery">
    <div class="PostDeliveryContent">
      <!-- 注意事项 -->
      <div class="scanInWarning">
        <div class="warningTitle">
          <img
            src="../../../assets/image/warningIcon.png"
            alt=""
          >
          <span>功能说明：</span>
          <Icon
            v-if="isOpen"
            color="#979797"
            type="ios-arrow-down"
            @click="toggleArrow"
          />
          <Icon
            v-else
            color="#979797"
            type="ios-arrow-up"
            @click="toggleArrow"
          />
        </div>
        <div
          v-if="isOpen"
          class="warningText"
        >
          <p>设置各类出入库场景下对唯一码管控的强度</p>
          <p>仅支持sku出库/入库：扫描商品出入库时只支持sku出入库，不解析唯一码；</p>
          <p>支持唯一码/sku出入库：扫描商品出入库时既支持扫描唯一码，也支持扫描sku；</p>
          <p>仅支持唯一码出/入库：如果商品启用唯一码管控，则只能扫描商品sku的唯一码进行出入库；</p>
          <p>仅支持退单/订单中商品唯一码入库：如果商品启用唯一码管控，在勾选仅支持唯一码入库时展示，只能扫描退单/订单中记录的唯一码进行入库。</p>
        </div>
      </div>
      <!-- 出库 -->
      <div class="UniqueCode">
        <div class="subTitle">
          支持场景：云雀扫描出库、云雀后置打单/出库、WMS出库
        </div>
        <foldPanel
          v-model="PrintBillStatus"
          title="出库"
        >
          <div
            slot="content"
            class="block"
          >
            <Form
              :label-width="60"
              label-position="left"
              inline
            >
              <FormItem label="管控强度">
                <RadioGroup
                  v-model="OutWarehouse"
                  @on-change="changeOutWarehouse"
                >
                  <Radio label="0">
                    <span>仅支持SKU出库</span>
                  </Radio>
                  <Radio label="1">
                    <span>支持唯一码/SKU出库</span>
                  </Radio>
                  <Radio label="2">
                    <span>仅支持唯一码出库</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
            </Form>
          </div>
        </foldpanel>
      </div>
      <div class="UniqueCode">
        <div class="subTitle">
          支持场景：云雀扫描入库、WMS退货入库
        </div>
        <foldPanel
          v-model="PrintOutStatus"
          title="退货入库"
        >
          <div
            slot="content"
            class="block"
          >
            <Form
              :label-width="60"
              label-position="left"
              inline
            >
              <FormItem label="管控强度">
                <RadioGroup
                  v-model="InWarehouse"
                  @on-change="changeInWarehouse"
                >
                  <Radio label="0">
                    <span>仅支持SKU入库</span>
                  </Radio>
                  <Radio label="1">
                    <span>支持唯一码/SKU入库</span>
                  </Radio>
                  <Radio label="2">
                    <span>仅支持唯一码入库</span>
                  </Radio>
                </RadioGroup>
                <Checkbox
                  v-if="InWarehouse == '2'"
                  v-model="InWarehouseType"
                  circle
                  @on-change="changeInWarehouseType"
                >
                  仅支持退单/订单中商品唯一码入库
                </Checkbox>
              </FormItem>
            </Form>
          </div>
        </foldPanel>
      </div>
      <div class="UniqueCode">
        <div class="subTitle">
          支持场景：调拨出库、采购退货出库、销售出库
        </div>
        <foldPanel
          v-model="PrintERPOUTOFSTOCKStatus"
          title="分销出库"
        >
          <div
            slot="content"
            class="block"
          >
            <Form
              :label-width="60"
              label-position="left"
              inline
            >
              <FormItem label="管控强度">
                <RadioGroup
                  v-model="ERP_OUT_OF_STOCK"
                  @on-change="changeErpOutofStock"
                >
                  <Radio label="0">
                    <span>仅支持SKU出库</span>
                  </Radio>
                  <Radio label="1">
                    <span>支持唯一码/SKU出库</span>
                  </Radio>
                  <Radio label="2">
                    <span>仅支持唯一码出库</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
            </Form>
          </div>
        </foldPanel>
      </div>
      <div class="UniqueCode">
        <div class="subTitle">
          支持场景：调拨入库、采购入库、销售退货入库
        </div>
        <foldPanel
          v-model="PrintERPRETURNANDSTORAGEStatus"
          title="分销入库"
        >
          <div
            slot="content"
            class="block"
          >
            <Form
              :label-width="60"
              label-position="left"
              inline
            >
              <FormItem label="管控强度">
                <RadioGroup
                  v-model="ERP_RETURN_AND_STORAGE"
                  @on-change="changeEprReturnAndStorage"
                >
                  <Radio label="0">
                    <span>仅支持SKU入库</span>
                  </Radio>
                  <Radio label="1">
                    <span>支持唯一码/SKU入库</span>
                  </Radio>
                  <Radio label="2">
                    <span>仅支持唯一码入库</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
            </Form>
          </div>
        </foldPanel>
      </div>
      <div class="UniqueCode">
        <foldPanel
          v-model="PrintPHYSICALFITStatus"
          title="物理调整"
        >
          <div
            slot="content"
            class="block"
          >
            <Form
              :label-width="60"
              label-position="left"
              inline
            >
              <FormItem label="管控强度">
                <RadioGroup
                  v-model="PHYSICAL_FIT"
                  @on-change="changePhysicalFit"
                >
                  <Radio label="0">
                    <span>仅支持SKU调整</span>
                  </Radio>
                  <Radio label="1">
                    <span>支持唯一码/SKU调整</span>
                  </Radio>
                  <Radio label="2">
                    <span>仅支持唯一码调整</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
            </Form>
          </div>
        </foldPanel>
      </div>
      <div class="UniqueCode">
        <foldPanel
          v-model="PrintDISCASKStatus"
          title="盘点"
        >
          <div
            slot="content"
            class="block"
          >
            <Form
              :label-width="60"
              label-position="left"
              inline
            >
              <FormItem label="管控强度">
                <RadioGroup
                  v-model="DISCASK"
                  @on-change="changeDiscask"
                >
                  <Radio label="0">
                    <span>仅支持SKU盘点</span>
                  </Radio>
                  <!-- <Radio label="1">
                    <span>支持唯一码/SKU盘点</span>
                  </Radio> -->
                  <Radio label="2">
                    <span>仅支持唯一码盘点</span>
                  </Radio>
                </RadioGroup>
              </FormItem>
            </Form>
          </div>
        </foldPanel>
      </div>
    </div>
  </div>
</template>
<script>
  import foldPanel from '../../customizedContent/FoldPanel.vue';

  const R3 = window.R3;

  const { network } = R3;
  export default {
    components: { foldPanel },
    data() {
      return {
        isOpen: true,
        PrintBillStatus: true,
        PrintOutStatus: true,
        PrintERPOUTOFSTOCKStatus: true,
        PrintERPRETURNANDSTORAGEStatus: true,
        PrintPHYSICALFITStatus: true,
        PrintDISCASKStatus: true,

        OutWarehouse: '0',
        InWarehouse: '0',
        InWarehouseType: false,

        ERP_OUT_OF_STOCK: '0',
        ERP_RETURN_AND_STORAGE: '',
        PHYSICAL_FIT: '',
        DISCASK: '',
        qrCodeControl: '',
      };
    },
    created() {
      this.getConfigDetail();
    },
    methods: {
      // 注意展开关闭
      toggleArrow() {
        this.isOpen = !this.isOpen;
      },
      changeOutWarehouse(e) {
        let id = this.qrCodeControl.OUT_OF_STOCK[Number(e)].id;
        this.updateConfigDetail(id, true);
      },
      changeInWarehouse(e) {
        if (e !== 2) {
          this.InWarehouseType = false;
        }
        let id = this.qrCodeControl.RETURN_AND_STORAGE[Number(e)].id;
        this.updateConfigDetail(id, true);
      },
      changeInWarehouseType(e) {
        this.updateConfigDetail(7, e);
      },
      // 分销出库更改选中值
      changeErpOutofStock(e) {
        let id = this.qrCodeControl.ERP_OUT_OF_STOCK[Number(e)].id;
        this.updateConfigDetail(id, true);
      },
      // 分销入库更改选中值
      changeEprReturnAndStorage(e) {
        let id = this.qrCodeControl.ERP_RETURN_AND_STORAGE[Number(e)].id;
        this.updateConfigDetail(id, true);
      },
      // 物理调整更改选中值
      changePhysicalFit(e) {
        let id = this.qrCodeControl.PHYSICAL_FIT[Number(e)].id;
        this.updateConfigDetail(id, true);
      },
      // 盘点更改选中值
      changeDiscask(e) {
        let id = this.qrCodeControl.DISCASK[Number(e)].id;
        this.updateConfigDetail(id, true);
      },
      getConfigDetail() {
        network.get('/p/cs/platform/config/qr_code_control').then(res => {
          if (res.data.code == 0) {
            this.qrCodeControl = res.data.data;
            res.data.data.OUT_OF_STOCK.forEach((item, index) => {
              if (item.configValue == 'true') {
                this.OutWarehouse = String(index);
              }
            });
            res.data.data.RETURN_AND_STORAGE.forEach((item, index) => {
              if (index !== 3) {
                if (item.configValue == 'true') {
                  this.InWarehouse = String(index);
                }
              }
            });
            res.data.data.ERP_OUT_OF_STOCK.forEach((item, index) => {
              if (item.configValue == 'true') {
                this.ERP_OUT_OF_STOCK = String(index);
              }
            });
            res.data.data.ERP_RETURN_AND_STORAGE.forEach((item, index) => {
              if (item.configValue == 'true') {
                this.ERP_RETURN_AND_STORAGE = String(index);
              }
            });
            res.data.data.PHYSICAL_FIT.forEach((item, index) => {
              if (item.configValue == 'true') {
                this.PHYSICAL_FIT = String(index);
              }
            });
            res.data.data.DISCASK.forEach((item, index) => {
              if (item.configValue == 'true') {
                this.DISCASK = String(index);
              }
            });
            this.InWarehouseType = res.data.data.RETURN_AND_STORAGE[3].configValue == 'true' ? true : false;
          }
        });
      },
      updateConfigDetail(id, value) {
        let params = {
          id,
          value
        };
        network.post('/p/cs/platform/config/qr_code_control/update', params).then(res => {
          if (res.data.code == 0) {
            console.log('更改成功');
          }
        });
      }
    },
  };
</script>
<style lang='less'>
  .itemContent .ark-input:not(textarea) {
    height: 32px;
  }
  .UniqueCode .ark-checkbox-large .ark-checkbox-inner {
    width: 24px;
    height: 24px;
  }
  .UniqueCode .ark-checkbox-large .ark-checkbox-checked .ark-checkbox-inner:after {
    width: 7px;
    height: 12px;
    top: 3px;
    left: 7px;
  }
  .UniqueCode .ark-collapse-content > .ark-collapse-content-box {
    padding-bottom: 0px;
  }
  .UniqueCode .ark-form-label-left .ark-form-item-label {
    line-height: 18px;
  }
  .UniqueCode .ark-checkbox-wrapper {
    vertical-align: middle;
  }
  .UniqueCode .ark-radio-inner {
    background: #fff;
  }
  .UniqueCode .ark-checkbox-checked .ark-checkbox-inner {
    background: #fff;
  }
  .UniqueCode .ark-checkbox-inner:after{
    position: absolute;
    width: 8px;
    height: 8px;
    left: 2px;
    top: 2px;
    border-radius: 6px;
    display: table;
    border-top: 0;
    border-left: 0;
    content: ' ';
    background-color: var(--primary-color);
    opacity: 0;
    transition: all 0.2s ease-in-out;
    transform: scale(0);
    border: none !important;
  }
  .UniqueCode .ark-checkbox-checked .ark-checkbox-inner:after {
    opacity: 1;
    transform: scale(1);
    transition: all 0.2s ease-in-out;
  }
  .UniqueCode .ark-radio-wrapper {
    margin-right: 40px;
  }
</style>
<style lang='less' scoped>
    .PostDelivery {
      min-width: 1240px;
      height: 100%;
    }
    .PostDeliveryContent {
      width: 100%;
      min-height: calc(100% - 70px);
      background: #fff;
      // margin-top:-50px;
      padding: 24px;
      .scanInWarning {
        margin-bottom: 24px;
        padding: 16px;
        background: #D5E7FF;
        .warningTitle {
          display: flex;
          align-items: center;
          span {
            color: #0046B9;
          }
          img {
            width: 14px;
            height: 14px;
            margin-right: 6px;
          }
        }
        .warningText {
          padding-left: 16px;
          margin-top: 6px;
          color: #0046B9;
          p {
            line-height: 18px;
          }
        }
      }
      .UniqueCode {
        .orderMsgBox {
          display: flex;
          .orderMsgItem {
            display: flex;
            font-size: 12px;
            line-height: 17px;
            color: #444444;
            margin-right: 190px;
            max-width: 500px;
            img {
              width: 48px;
              height: 48px;
              margin-right: 16px;
            }
            .MsgValue {
              font-size: 14px;
              line-height: 20px;
              color: #4C4C4C;
              margin-top: 8px;
            }
          }
        }
      }
    }
    .UniqueCode {
      position: relative;
      .subTitle {
        position: absolute;
        top: 11px;
        left: 92px;
        z-index: 2;
        color: #909399;
      }
    }
    .UniqueCode:nth-child(2) {
      .subTitle {
        left: 68px;
      }
    }
</style>
