<template>
  <div class="rmsDirectlySentCity">
    <div class="search">
      <el-input v-model="con" style="width:250px"></el-input>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="primary" @click="insert">新增</el-button>
    </div>
    <div class="table">
      <dilTable v-bind.sync="options">
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="deleteInfo(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </dilTable>
    </div>
    <div class="dialog">
      <el-dialog
        :visible.sync="visible"
        title="新增直发关系维护表"
        width="100%"
      >
        <div class="insertClass" style="margin-left: 10px;">
          <el-button type="primary" @click="addRow">
            <i class="el-icon-plus"></i>新增
          </el-button>
        </div>
        <div class="table">
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column
              v-for="item in tableTop"
              :label="item.label"
              :prop="item.prop"
              :key="item.key"
              align="center"
              :column-key="item.key"
              :width="item.width"
            >
              <template slot-scope="scope">
                <template v-if="item.slotType === 'auto'">
                  <el-autocomplete
                    class="inline-input"
                    v-model="scope.row[item.prop]"
                    :fetch-suggestions="
                      (queryString, cb) => {
                        querySearchTable(queryString, cb, scope.row, item.prop)
                      }
                    "
                    :placeholder="`请输入${item.label}`"
                    @select="handleSelectTable($event, scope.row, item.prop)"
                    ><template slot-scope="{ item }">
                      <div class="name">{{ item[item.prop] }}</div>
                    </template></el-autocomplete
                  >
                </template>
                <template v-else-if="item.slotType === 'input'">
                  <el-input
                    v-model="scope.row[item.prop]"
                    :placeholder="`请输入${item.label}`"
                    clearable
                  >
                  </el-input>
                </template>
                <template v-else-if="item.slotType === 'select'">
                  <el-select
                    v-model="scope.row[item.prop]"
                    :placeholder="`请选择${item.label}`"
                    filterable
                    remote
                    reserve-keyword
                    :remote-method="
                      query => {
                        remoteMethod(query, scope.row, item.prop)
                      }
                    "
                  >
                    <el-option
                      v-for="(e, index) in getOptions(scope.row, item.prop)"
                      :key="index"
                      :label="e.label"
                      :value="e.value"
                    ></el-option>
                  </el-select>
                </template>
                <template v-else-if="item.slotType === 'button'">
                  <el-button
                    type="danger"
                    @click="deleteRow(scope.$index, scope.row)"
                  >
                    删除
                  </el-button>
                  <el-button
                    type="primary"
                    @click="copyRow(scope.$index, scope.row)"
                  >
                    复制
                  </el-button>
                </template>
                <template v-else>
                  <span>{{ scope.row[item.prop] }}</span>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <div class="dialogFooter">
            <el-button type="danger" @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="makeSure">确 定 </el-button>
          </div>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getCookie } from '@/utils/util.js'
export default {
  data() {
    return {
      options: {
        requestUrl: '/api/v1/rms/getDirectlySentCity?apiId=528'
      },
      con: '',
      visible: false,
      tableTop: [
        {
          prop: 'directlySentName',
          label: '直发名称',
          key: '2',
          slot: true,
          slotType: 'input'
        },
        {
          prop: 'provinceName',
          label: '省',
          key: '3',
          slot: true,
          slotType: 'select',
          options: []
        },
        {
          prop: 'districtName',
          label: '市',
          key: '4',
          slot: true,
          slotType: 'select',
          placeholder: '非必填'
        },
        {
          prop: 'townName',
          label: '县',
          key: '5',
          slot: true,
          slotType: 'select',
          placeholder: '非必填'
        },
        {
          prop: 'place',
          label: '详细地址',
          key: '6',
          slot: true,
          slotType: 'input',
          placeholder: '非必填'
        },
        {
          prop: 'carrierId',
          label: '承运商ID',
          key: '7',
          slot: true,
          slotType: 'select'
        }
      ],
      tableData: [],
      provinceUrl: '/api/v1/uc/getAllProvince',
      provinceData: [],
      carrierList: [],
      townData: [],
      districtData: [],
      districtUrl: '/api/v1/uc/getDistrictByProvince',
      townUrl: '/api/v1/uc/getTownByDistrict'
    }
  },
  created() {
    this.getAllProvince()
  },
  computed: {
    getOptions(row, prop) {
      return function(row, prop) {
        if (prop == 'carrierId') {
          return this.carrierList
        }
        if (prop == 'provinceName') {
          return this.provinceData
        }
        if (prop == 'districtName') {
          return this.districtData
        }
        if (prop == 'townName') {
          return this.townData
        }
        // return this.provinceData
      }
    }
  },
  methods: {
    search() {
      this.options.requestUrl =
        '/api/v1/rms/getDirectlySentCity?apiId=528&con=' +
        this.con +
        '&i=' +
        new Date()
    },
    remoteMethod(query, row, prop) {
      if (prop == 'carrierId') {
        this.axios
          .post('/api/v1/uc/getCarrierIdBySelect?index=' + query)
          .then(res => {
            this.carrierList = res.data.data
          })
      }
      if (prop == 'provinceName') {
        this.axios.post(this.provinceUrl).then(res => {
          this.provinceData = res.data.data.filter(item => {
            return item.label.indexOf(query) > -1
          })
        })
      }
      if (prop == 'districtName') {
        this.axios
          .post(this.districtUrl + '?addressProvince=' + row.provinceName)
          .then(res => {
            this.districtData = res.data.data.filter(item => {
              return item.label.indexOf(query) > -1
            })
          })
      }
      if (prop == 'townName') {
        this.axios
          .post(this.townUrl + '?addressDistrict=' + row.districtName)
          .then(res => {
            this.townData = res.data.data.filter(item => {
              return item.label.indexOf(query) > -1
            })
          })
      }
    },
    getAllProvince() {
      this.axios.post(this.provinceUrl).then(res => {
        this.provinceData = res.data.data
        this.tableTop[1].options = this.provinceData
      })
      this.axios
        .post('/api/v1/uc/getCarrierIdBySelect?index=' + '')
        .then(res => {
          this.carrierList = res.data.data
        })
    },
    search() {
      this.options.requestUrl =
        '/api/v1/rms/getDirectlySentCity?apiId=528&con=' +
        this.con +
        '&i=' +
        new Date()
    },
    insert() {
      this.visible = true
    },
    deleteRow(index, row) {
      console.log(index, 'index')
      this.tableData.splice(index, 1)
    },
    addRow() {
      this.tableData.push({
        index: this.tableData.length + 1,
        place: '',
        townName: '',
        provinceName: '',
        directlySentName: '',
        districtName: ''
      })
    },
    copyRow(index, row) {
      this.tableData.splice(index + 1, 0, {
        index: this.tableData.length + 1,
        carrierId: row.carrierId,
        provinceName: row.provinceId,
        districtName: row.districtId,
        townName: row.townId,
        place: row.place,
        directlySentName: row.directlySentName
      })
    },
    makeSure() {
      console.log(this.tableData)
      let map = {
        userName: getCookie('loginName'),
        mapList: this.tableData
      }
      this.axios
        .post('/api/v1/rms/insertDirectlySentCityInfo', map)
        .then(res => {
          if (res.data.status == 'succeed') {
            this.$message({
              type: 'success',
              message: '添加成功'
            })

            this.search()
            this.visible = false
          } else {
            this.$message({
              type: 'error',
              message: '添加失败'
            })
          }
        })
    },
    deleteInfo(row) {
      this.axios.post('/api/v1/rms/deleteInfo', row).then(res => {
        if (res.data.status == 'succeed') {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.search()
        } else {
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.rmsDirectlySentCity {
  .search {
    margin-left: 10px;
    margin-top: 10px;
  }
  .table {
    margin-left: 10px;
    margin-top: 10px;
  }
}
</style>
