<template>
  <base-list>
    <template slot="n_header">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="线路">
          <el-select
            v-model="pagerDto._Eq_ExpressId"
            size="mini"
            placeholder="线路"
            clearable
            filterable
          >
            <el-option
              v-for="item in circuitList"
              :key="item.Code"
              :label="item.Name"
              :value="item.Code"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template slot="n_option">
      <el-button type="primary" @click="add">新增规则</el-button>
    </template>
    <template>
      <el-table
        ref="multipleTable"
        v-loading="dataLoading"
        :data="sourceData"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="ChannelName" label="线路" />
        <el-table-column prop="CountryCodes" label="偏远类型">
          <template slot-scope="scope">
            {{scope.row&& scope.row.HsArea?"邮编列表":"跟踪" }}
          </template>
        </el-table-column>
        <el-table-column prop="EnabledTime" label="生效时间" /> 
        <el-table-column prop="Remark" label="备注" />
        <el-table-column width="120" label="操作">
          <template slot-scope="r">
            <el-button type="text" @click="editItem(r.row)"> 调整规则 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 40, 100, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size.sync="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @size-change="changePager"
        @current-change="pagerSerach"
      />
    </template>
    <el-dialog :visible.sync="dialogRemote" :close-on-click-modal="false" :before-close="closeForm" custom-class="addremote-style" :title="editRemoteText">
      <el-form ref="ruleFormAddRemote" label-position="left" :model="paramsRemote" :rules="paramsRemoteRule" label-width="100px">
        <div v-if="editRemote" class="circuit">
          <div class="label item">线路：</div>
          <div class="item">
            {{ paramsRemote.ChannelName }}
          </div>
        </div>
        <div v-else>
          <el-form-item label="线路：" prop="ExpressId">
            <el-select
              v-model="paramsRemote.ExpressId"
              placeholder="请选择线路"
              clearable
              filterable
              class="item-warp"
            >
              <el-option
                v-for="item in circuitList"
                :key="item.Id"
                :label="item.Name"
                :value="item.Id"
              />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="生效时间：" prop="EnabledTime">
          <el-date-picker
            v-model="paramsRemote.EnabledTime"
            class="item-warp"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="请选择生效时间"
          />
        </el-form-item>
        <el-form-item label="偏远类型：" prop="HsArea">
          <el-select
            v-model="paramsRemote.HsArea"
            class="item-warp"
            placeholder="请选择偏远类型"
            clearable
          >
            <el-option
              v-for="item in remoteList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="偏远内容：" prop="Value">
          <el-input v-model="paramsRemote.Value" type="textarea" :autosize="{ minRows: 6, maxRows: 6}" />
        </el-form-item>
        <el-form-item label="备注内容：" prop="Remark">
          <el-input v-model="paramsRemote.Remark" type="textarea" :autosize="{ minRows: 6, maxRows: 6}" />
        </el-form-item>
        <div class="remote-footer">
          <el-button type="danger" @click="closeForm">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleFormAddRemote')" :loading="onSave">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </base-list>
</template>
<script>
import { _getChannelList } from '@/api/baseInfo'
import BaseList from '@/components/Xyy/baselist'
import { deepClone } from '@/utils'
// import { GetPageResult ,GetValue,AddRemote,EditRemote} from '@/api/channel/remote'
export default {
  name: 'RemoteRule',
  components: { 'base-list': BaseList },
  data() {
    return {
      pagerDto: {
        _Eq_ExpressId: null,
        PageIndex: 1,
        PageSize: 20,
        total: 0, 
      }, // 查询
      onSave:false,
      circuitList: [], // 线路
      multipleSelection: [], // 表格复选框
      sourceData: [{ field: '测试' }], // 表格来源数据
      dataLoading: false, // 加载
      dialogRemote: false, // 规则弹窗
      paramsRemote: {
        ExpressId: '',
        EnabledTime: '',
        HsArea: '',
        Value: '',
        Remark: ''
      }, // 添加规则
      editRemote: false, // 编辑状态
      paramsRemoteRule: {
        ExpressId: [
          { required: true, message: '请选择线路', trigger: 'change' }
        ],
        EnabledTime: [
          { required: true, message: '请选择生效时间', trigger: 'change' }
        ],
        HsArea: [
          { required: true, message: '请选择偏远类型', trigger: 'change' }
        ],
        Value: [
          { required: true, message: '请输入偏远内容', trigger: 'change' }
        ],
        Remark: [
          { required: true, message: '请输入备注内容', trigger: 'change' }
        ]
      },
      remoteList: [
        {
          value: false,
          label: '运单号偏远'
        },
        {
          value: true,
          label: '邮编偏远'
        }
      ] // 偏远类型
    }
  },
  computed: {
    editRemoteText() {
      return this.editRemote ? '调整规则' : '新增规则'
    }
  },
  mounted() {
    _getChannelList().then((resp) => {
      this.circuitList = resp
    })
    this.pagerSerach();
  },
  methods: {
    // 新增规则
    add() {
      this.paramsRemote={  ExpressId: '',
        EnabledTime: '',
        HsArea: '',
        Value: '',
        Remark: ''}
      this.dialogRemote = true
      this.editRemote = false
    },
    submitForm(formName) {
      const _this = this      
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 参数
          console.log(_this.paramsRemote, '<=paramsRemote')
          if (_this.editRemote) {
            // 编辑规则
            this.onSave=true
            EditRemote(_this.paramsRemote).then(r=>{
              _this.$alert('编辑成功');
              this.pagerSerach();
              this.dialogRemote=false;
            }).finally(r=>{this.onSave=false})
          } else {
            // 新增规则
            AddRemote(_this.paramsRemote).then(r=>{
              _this.$alert('添加成功');
              this.pagerSerach();
              this.dialogRemote=false;
            }).finally(r=>{this.onSave=false})
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    closeForm() {
      this.paramsRemote.field = ''
      this.$refs.ruleFormAddRemote.resetFields()
      this.dialogRemote = false
    },
    // 编辑
    editItem(row) {
      this.dialogRemote = true
      this.editRemote = true
      // 编辑的数据
      const cloneData = deepClone(row)
      Object.assign(this.paramsRemote, cloneData)
      this.$set(this.paramsRemote)
      GetValue(this.paramsRemote.Id).then(r=>{
         this.paramsRemote.Value = r
      })
    },
    // 表格复选框
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 分页
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      GetPageResult(this.pagerDto).then(r=>{
        debugger
        this.sourceData=r.Result
        this.pagerDto.total = r.total
        this.dataLoading=false
      }).catch(r=>{this.dataLoading=false
      })
    },
    changePager(v) {
      this.pagerDto.PageSize = v
      this.pagerSerach()
    }
  }
}
</script>
<style scoped>
    .remote-footer {
        text-align: right;
    }
    .addremote-style .item-warp {
        width: 200px;
    }
    .circuit {
        display: flex;
    }
    .circuit .item {
        width: 100px;
        line-height: 36px;
        padding-bottom: 16px;
    }
    .circuit .label {
        font-weight: 700;
        color: #606266;
    }
</style>
