<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="pagerDto._Eq_Id" placeholder="渠道名称" clearable filterable>
          <el-option
            v-for="item in channels"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="pagerDto._Eq_IsEnable" placeholder="启用状态" clearable filterable>
          <el-option label="启用" value="True" />
          <el-option label="停用" value="False" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="small" type="primary" :loading="ladding" @click="pagerSerach(1)">搜索</el-button>
        <el-button icon="el-icon-plus" size="small" plain type="primary">
          <router-link :to="{name:'ChannelEdit',params:{Id:0}}">添加渠道</router-link></el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="sData"
      border
      height="660"
    >
      <el-table-column label="渠道名称" prop="PublicName" />
      <el-table-column label="派送代码" prop="PublicCode" />
      <el-table-column label="下单名称" prop="Name" />
      <el-table-column label="下单代码" prop="Code" />
      <el-table-column label="限重" prop="MaxWeight" />
      <el-table-column label="称重转单" prop="IsTransfer">
        <template scope="s">
          <el-tag v-if="s.row.IsTransfer" type="success">是</el-tag>
          <el-tag v-if="!s.row.IsTransfer" type="danger">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="出库转单" prop="IsServiceTransfer">
        <template scope="s">
          <el-tag v-if="s.row.IsServiceTransfer" type="success">是</el-tag>
          <el-tag v-if="!s.row.IsServiceTransfer" type="danger">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="默认电话" prop="DefaultPhone" />
      <el-table-column label="补充州城市" prop="AddStateName">
        <template scope="s">
          <el-tag v-if="s.row.AddStateName" type="success">是</el-tag>
          <el-tag v-if="!s.row.AddStateName" type="danger">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="498px">
        <template slot-scope="scope">
          <el-button size="mini" type="success" plain @click="onClickFBAExpress(scope.row)" v-if="scope.row.CanMPS">
            fba快递配置
          </el-button>
          <el-button size="mini" type="danger" plain @click="onClickEndServiceProvider(scope.row)">
            异常节点配置
          </el-button>
          <el-button size="mini" type="primary">
            <router-link :to="{name:'ChannelEdit',params:{Id:scope.row.Id}}">编辑</router-link>
          </el-button>
          <el-button v-if="!scope.row.IsEnable" size="mini" type="info" @click="Enable(scope.row.Id)">
            启用
          </el-button>
          <el-button v-if="scope.row.IsEnable" size="mini" type="warning" @click="Disable(scope.row.Id)">
            停用
          </el-button>
          <el-button size="mini" type="success">
            <router-link :to="{name:'ChannelCopy',params:{Id:scope.row.Id,mode:'copy'}}">复制</router-link>
          </el-button>
          <el-button size="mini" type="info">
            <router-link :to="{name:'ChannelTest',params:{Id:scope.row.Id,Name:scope.row.PublicName,Code:scope.row.PublicCode}}">测试</router-link>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-sizes="[100, 200, 300, 400]"
      :current-page="pagerDto.PageIndex"
      :page-size="pagerDto.PageSize"
      background
      layout="prev, pager, next ,total ,jumper,sizes,slot "
      :total="pagerDto.total"
      @current-change="pagerSerach"
      @size-change="sizeChange"
    />
    <el-dialog
      title="编辑异常轨迹服务商"
      :visible.sync="isEndServiceProvider"
      width="520px"
      :before-close="closeServiceProvider">
      <div>
        <el-select
          v-model="editServiceProviderDto.EndServiceProvider"
          placeholder="异常轨迹服务商"
          style="width: 100%;"
          clearable
          multiple>
          <el-option
            v-for="item in endServiceProviderList"
            :key="item.Id"
            :label="item.ProviderName"
            :value="item.Id"
          />
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeServiceProvider">取 消</el-button>
        <el-button type="primary" @click="onSaveServiceProvider">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="编辑fba快递配置"
      :visible.sync="isDialogFBAExpress"
      width="520px"
      :before-close="closeDialogFBAExpress">
      <div class="fba-form">
        <el-form :model="editFBAExpressDto" :rules="rulesFBAExpress" ref="fbaExpressRef" label-width="60px" inline>
          <el-form-item label="长" required>
            <el-form-item prop="LengthMode">
              <el-select
                v-model="editFBAExpressDto.LengthMode"
              >
                <el-option
                  v-for="item in operateModeList"
                  :key="item.Id"
                  :label="item.Name"
                  :value="item.Id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="LengthValue">
              <el-input-number class="fba-num" v-model="editFBAExpressDto.LengthValue" :controls="false" :min="0" placeholder="请输入"></el-input-number>
            </el-form-item>
          </el-form-item>
          <el-form-item label="宽" required>
            <el-form-item prop="WidthMode">
              <el-select
                v-model="editFBAExpressDto.WidthMode"
              >
                <el-option
                  v-for="item in operateModeList"
                  :key="item.Id"
                  :label="item.Name"
                  :value="item.Id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="WidthValue">
              <el-input-number class="fba-num" v-model="editFBAExpressDto.WidthValue" :controls="false" :min="0" placeholder="请输入"></el-input-number>
            </el-form-item>
          </el-form-item>
          <el-form-item label="高" required>
            <el-form-item prop="HeightMode">
              <el-select
                v-model="editFBAExpressDto.HeightMode"
              >
                <el-option
                  v-for="item in operateModeList"
                  :key="item.Id"
                  :label="item.Name"
                  :value="item.Id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="HeighthValue">
              <el-input-number class="fba-num" v-model="editFBAExpressDto.HeighthValue" :controls="false" :min="0" placeholder="请输入"></el-input-number>
            </el-form-item>
          </el-form-item>
          <el-form-item label="重量" required>
            <el-form-item prop="WeighthMode">
              <el-select
                v-model="editFBAExpressDto.WeighthMode"
              >
                <el-option
                  v-for="item in operateModeList"
                  :key="item.Id"
                  :label="item.Name"
                  :value="item.Id"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="WeightValue">
              <el-input-number class="fba-num" v-model="editFBAExpressDto.WeightValue" :controls="false" :min="0" placeholder="请输入"></el-input-number>
            </el-form-item>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialogFBAExpress">取 消</el-button>
        <el-button type="primary" :loading="loadingFBAExpress" @click="onSaveFBAExpress">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { _queryPager, _disable, _enable } from '@/api/channel'
import { _getCustomers, _getDeliverChannel } from '@/api/baseInfo'
import { _getEndServiceProviderList, _setChannelEndServiceProvider } from '@/api/trakingMoreNode'
import { getModeEnum } from "@/api/enum/enums";
import { _addOrEditFbaExpressSetting, _getFbaExpressSetting } from '@/api/order/fba/report'

export default {
  name: 'ChannelList',
  data() {
    return {
      ladding: false,
      sData: [],
      channels: [],
      row: {},
      pagerDto: {
        PageIndex: 1,
        PageSize: 100,
        total: 0,
        _In_TrackingNumber: '',
        QuerySort: [{ Field: 'Id', IsDesc: true }],
        _Eq_Id: '',
        _Eq_IsEnable: 'True'
      },
      endServiceProviderList: [],
      isEndServiceProvider: false,
      editServiceProviderDto: {
        channelId: undefined,
        EndServiceProvider: undefined
      },
      isDialogFBAExpress: false,
      editFBAExpressDto: {
        ChannelId: undefined,
        LengthValue: undefined,
        LengthMode: undefined,
        WidthValue: undefined,
        WidthMode: undefined,
        HeighthValue: undefined,
        HeightMode: undefined,
        WeightValue: undefined,
        WeighthMode: undefined,
      },
      rulesFBAExpress: {
        LengthValue: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        LengthMode: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        WidthValue: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        WidthMode: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        HeighthValue: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        HeightMode: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        WeightValue: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        WeighthMode: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
      },
      operateModeList: [],
      loadingFBAExpress: false,
    }
  },
  created() {
    this.pagerSerach()
    _getDeliverChannel().then(response => {
      this.channels = response
    })
    _getEndServiceProviderList().then((response) => {
      this.endServiceProviderList = response
    })
    getModeEnum("OperateModeEnum").then((res) => {
      this.operateModeList = res
    });
  },
  methods: {
    closeServiceProvider() {
      this.isEndServiceProvider = false
      this.editServiceProviderDto.channelId = undefined
    },
    onClickEndServiceProvider(row) {
      this.editServiceProviderDto.channelId = row.Id
      if (row.EndServiceProvider) {
        this.editServiceProviderDto.EndServiceProvider = row.EndServiceProvider.split(',').map(Number);
      } else {
        this.editServiceProviderDto.EndServiceProvider = []
      }
      this.isEndServiceProvider = true
    },
    // 异常轨迹服务商
    onSaveServiceProvider() {
      const channelId = this.editServiceProviderDto.channelId
      const EndServiceProvider = this.editServiceProviderDto.EndServiceProvider.join(',')
      _setChannelEndServiceProvider({
        channelId,
        EndServiceProvider
      }).then(() => {
        this.$message({ type: 'success', message: '保存成功' })
        this.closeServiceProvider()
      })
    },
    sizeChange(pageSize) {
      this.pagerDto.PageSize = pageSize
      this.pagerSerach()
    },
    pagerSerach(page = 1) {
      this.pagerDto.PageIndex = page
      this.ladding = true
      _queryPager(this.pagerDto).then(response => {
        this.sData = response.Result
        this.ladding = false
        this.pagerDto.total = response.TotalCount
      }).catch(response => {
        this.ladding = false
      })
    },
    Disable(id) {
      _disable(id).then(res => {
        this.$message('修改成功')
        this.pagerSerach()
      })
    },
    Enable(id) {
      _enable(id).then(res => {
        this.$message('修改成功')
        this.pagerSerach()
      })
    },
    // 编辑fba快递配置
    onClickFBAExpress(row) {
      _getFbaExpressSetting(row.Id).then((res) => {
        if (res) this.editFBAExpressDto = res
        this.editFBAExpressDto.ChannelId = row.Id
        this.isDialogFBAExpress = true
      }).finally(() => {
      })
    },
    closeDialogFBAExpress() {
      this.isDialogFBAExpress = false
      this.editFBAExpressDto.ChannelId = undefined
    },
    onSaveFBAExpress() {
      this.$refs.fbaExpressRef.validate((valid) => {
        if (valid) {
          this.loadingFBAExpress = true
          _addOrEditFbaExpressSetting(this.editFBAExpressDto).then((res) => {
            this.$message({ type: 'success', message: '编辑成功' })
            this.closeDialogFBAExpress()
          }).finally(() => {
            this.loadingFBAExpress = false
          })
        } else {
          return false;
        }
      });
    }

  }

}
</script>
<style scoped>
.fba-form {
  padding-top: 20px;
}
.fba-form .fba-num {
  width: 180px;
}
.fba-form .fba-num ::v-deep .el-input__inner {
  text-align: left;
}
</style>
