<template>
  <div id="operator">
    <el-container>
      <el-main>

        <div style="margin-bottom: 10px">
          <el-button size="medium" icon="el-icon-back" type="text" @click="back">返回</el-button>
          <span style="margin-left: 20px; font-size: 18px">运营商列表</span>
        </div>


        <el-button size="medium" icon="el-icon-search" style="margin-bottom: 15px" @click="search(searchFormData)">
          查询
        </el-button>
        <el-button size="medium" icon="el-icon-plus" @click="showAdd" style="margin-left: 0">新增</el-button>


        <div style="padding: 10px;background-color: white">
          <el-form :inline="true" :model="searchFormData" style="background-color: white;">
            <el-form-item label="运营商名称">
              <el-input placeholder="运营商名称" size="mini" v-model="searchFormData.name"></el-input>
            </el-form-item>
            <el-form-item label="运营商编号">
              <el-input placeholder="运营商编号" size="mini" v-model="searchFormData.number"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input placeholder="联系人" size="mini" v-model="searchFormData.contact"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input placeholder="联系电话" size="mini" v-model="searchFormData.tel"></el-input>
            </el-form-item>


            <el-form-item label="省份" size="mini" style="margin-top: 6px">
              <el-select v-model="searchFormData.province" placeholder="省份" style="width: 180px" clearable>
                <el-option v-for="item in areas" :value="item.label" :label="item.label" :key="item.code"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="城市" style="margin-top: 6px" size="mini">
              <el-select v-model="searchFormData.city" placeholder="城市" style="width: 180px"
                         :disabled="!searchFormData.province" clearable>
                <el-option v-for="item in cityArr" :value="item.label" :label="item.label" :key="item.code"></el-option>
              </el-select>
            </el-form-item>


            <el-form-item label="具体地址">
              <el-input placeholder="具体地址" size="mini" v-model="searchFormData.address"></el-input>
            </el-form-item>


            <el-dialog title="运营商" :visible.sync="dialogFormVisible" style="width: 71% ; margin-left: 300px ;">

              <el-form label-position="left" :model="formData" :rules="rules" ref="formData">

                <el-row style="margin-left: 15px">
                  <el-form-item label="运营商名称" style="margin-left: 0px" prop="name">
                    <el-input v-model="formData.name"></el-input>
                  </el-form-item>
                  <el-form-item label="运营商编号" style="" prop="number">
                    <el-input v-model="formData.number"></el-input>
                  </el-form-item>
                </el-row>

                <el-row style="margin-left: 15px ;margin-top: 20px">
                  <el-form-item label="联系人" style="margin-left: 28px;margin-right: 24px" prop="contact">
                    <el-input v-model="formData.contact"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话" style="" prop="tel">
                    <el-input v-model="formData.tel"></el-input>
                  </el-form-item>
                </el-row>

                <el-row style="margin-left: 15px;margin-top: 20px;margin-bottom: 20px">
                  <el-form-item label="省份" style="margin-left: 42px;margin-right: 50px" prop="province">
                    <el-select v-model="formData.province" placeholder="省份" style="width: 202px" clearable>
                      <el-option v-for="item in areas" :value="item.label" :label="item.label"
                                 :key="item.code"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="城市" prop="city">
                    <el-select v-model="formData.city" placeholder="城市" style="width: 202px"
                               :disabled="!formData.province" clearable>
                      <el-option v-for="item in cityArr" :value="item.label" :label="item.label"
                                 :key="item.code"></el-option>
                    </el-select>
                  </el-form-item>
                </el-row>


                <el-form-item label="具体地址" style="margin-left: 28px " prop="address">
                  <el-input v-model="formData.address"></el-input>
                </el-form-item>

              </el-form>

              <div slot="footer" class="dialog-footer" style="text-align: center">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="addOrEditMehtond('formData')">确 定</el-button>
              </div>
            </el-dialog>

          </el-form>


          <el-table :data="tableData">
            <el-table-column type="selection"></el-table-column>

            <el-table-column prop="name" label="运营商名称"></el-table-column>
            <el-table-column prop="number" label="运营商编号"></el-table-column>
            <el-table-column prop="contact" label="联系人"></el-table-column>
            <el-table-column prop="tel" label="联系电话"></el-table-column>

            <el-table-column prop="province" label="省份"></el-table-column>
            <el-table-column prop="city" label="城市"></el-table-column>
            <el-table-column prop="address" label="具体地址"></el-table-column>
            <el-table-column label="账号状态">
              <template slot-scope="scope">
                {{ String(scope.row.status) === '0' ? '已禁用' : '正常' }}
              </template>
            </el-table-column>


            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="medium" @click="showEdit(scope.row)">编辑</el-button>
                <el-button type="text" size="medium" @click="operatorList(scope.row)">项目</el-button>
                <el-button type="text" size="medium" @click="del(scope.row)" style="color: #c01920">删除</el-button>

                <el-button
                    type="text"
                    size="medium"
                    class="delBut non"
                    style="color: #c01920"
                    @click="statusHandle(scope.row)"
                >
                  {{ scope.row.status == '1' ? '禁用' : '启用' }}
                </el-button>

              </template>
            </el-table-column>
          </el-table>


          <el-pagination
              style="margin-top: 15px;text-align: center"
              background
              layout="prev, pager, next"
              :page-size="pager.pageSize"
              :current-page="pager.pageIndex"
              :total="pager.itemCount"
              @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </el-main>

    </el-container>
  </div>


</template>


<script>
import areas from '../../util/area.json'

export default {
  name: 'operator',
  data() {
    return {

      rules: {
        province: [
          {required: true, message: '请输入省份', trigger: 'change'}
        ],
        city: [
          {required: true, message: '请输入城市', trigger: 'change'}
        ],
        address: [
          {required: true, message: '请输入地区', trigger: 'blur'}
        ],
        contact: [
          {required: true, message: '请输入联系人', trigger: 'blur'}
        ],
        tel: [
          {required: true, message: '请输入联系电话', trigger: 'blur'}
        ],
        number: [
          {required: true, message: '请输入运营商编号', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入运营商名称', trigger: 'blur'}
        ],
      },


      //存放对应的城市数组
      cityArr: [],
      //省份
      areas: areas,

      api: {
        list: this.$api.operator.list,
        delete: this.$api.operator.delete,
        add: this.$api.operator.add,
        update: this.$api.operator.update,
      },

      value: true,

      addOrEdit: 1,

      dialogFormVisible: false,

      pager: {
        pageSize: 2,
        pageIndex: 1,
        itemCount: 0,
      },

      tableData:
          [{
            name: '1',
            contact: '1',
            tel: '1',
            province: '1',
            city: '1',
            address: '',
            code: '',
            valid: '',
            number: '',
            status: 1
          }],
      formData: {
        name: '',
        contact: '',
        tel: '',
        province: '',
        city: '',
        address: '',
        number: '',
        code: '',
        valid: '',
      },
      searchFormData:
          {
            name: '',
            contact: '',
            tel: '',
            province: '',
            city: '',
            address: '',
            number: '',
          }
    }
  },


  created: function () {
    this.loadData();

  },

  watch: {
    immediate:true,

    'searchFormData.province'(oldValue, newValue) {

      console.log(oldValue)
      console.log(newValue)

      this.searchFormData.city = ''

      if (oldValue) {
        this.cityArr = areas.find(item => item.label == oldValue).children
        console.log(this.cityArr)
      }
    },

    'formData.province'(oldValue, newValue) {
      console.log(newValue)

      if (newValue == '') {

        this.cityArr = areas.find(item => item.label == oldValue).children
        console.log(this.cityArr)

      } else {
        this.formData.city = ''

        this.cityArr = areas.find(item => item.label == oldValue).children
        console.log(this.cityArr)
      }
    },
    deep: true  // 深度监听
  },


  methods: {

    //切换页码
    handleCurrentChange(index) {
      this.loadData(index)
    },

    loadData(index) {
      const vm = this;
      vm.$http.get(vm.api.list, {
        params: {
          pageSize: 5,
          pageIndex: index ? index : 1,

          name: this.searchFormData.name,
          contact: this.searchFormData.contact,
          tel: this.searchFormData.tel,
          province: this.searchFormData.province,
          city: this.searchFormData.city,
          address: this.searchFormData.address,
          number: this.searchFormData.number,
        }
      })
          .then((response) => {
            // vm.paper = response.data.data.paper;
            console.log(response.data.data);

            vm.pager = response.data.data.pager

            vm.tableData = response.data.data.operators;
          })
    },
    search() {
      //console.log(this.searchFormData)
      this.loadData();
    },
    showAdd() {
      this.dialogFormVisible = true;

      this.formData.name = '';
      this.formData.province = '';
      this.formData.city = '';
      this.formData.address = '';
      this.formData.contact = '';
      this.formData.tel = '';
      this.formData.number = '';
      this.addOrEdit = 1
    },

    showEdit(row) {
      this.dialogFormVisible = true;

      this.editRow = JSON.parse(JSON.stringify(row));
      this.formData = this.editRow

      this.addOrEdit = 2
    },


    addOrEditMehtond(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const vm = this;
          if (this.addOrEdit == 2) {
            vm.$http.get(vm.api.update, {
              params: {
                code: this.formData.code,
                name: this.formData.name,
                province: this.formData.province,
                city: this.formData.city,
                contact: this.formData.contact,
                tel: this.formData.tel,
                address: this.formData.address,
                number: this.formData.number,
                status: 1,
              }
            })
                .then((response) => {
                  console.log(response)

                  if (response.data.status == 200) {

                    this.$message({
                      type: 'success',
                      showClose: true,
                      message: response.data.desc
                    })
                  }

                  this.dialogFormVisible = false;

                  this.loadData();

                })
                .catch(() => {
                });
          }

          if (this.addOrEdit == 1) {
            vm.$http.get(vm.api.add, {
              params: {
                name: this.formData.name,
                contact: this.formData.contact,
                tel: this.formData.tel,
                province: this.formData.province,
                city: this.formData.city,
                address: this.formData.address,
                number: this.formData.number,
                status: 1,
              }
            })
                .then((response) => {
                  if (response.data.status == 200) {

                    this.dialogFormVisible = false;

                    this.$message({
                      type: 'success',
                      showClose: true,
                      message: response.data.desc
                    })

                    this.loadData();
                  }
                })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });


    },

    del(row) {
      const vm = this;
      this.$confirm('确认删除', '提示', {
        type: 'warning'
      }).then(() => {
        vm.$http.get(vm.api.delete, {
          params: {
            code: row.code,
          }
        })
            .then((response) => {
              console.log(response)
              if (response.data.status == 200) {
                this.$message({
                  type: 'success',
                  showClose: true,
                  message: response.data.desc
                })


              }
              this.loadData();
            })
      })
          .catch(() => {
            this.$message({
              type: 'info',
              showClose: true,
              message: '取消删除'
            })
          });
    },
    cancel() {
      this.$message({
        message: '操作取消',
        showClose: true,
        type: 'info'
      });

      this.formData.province = '';
      this.formData.city = '';

      this.$refs.formData.clearValidate();
      this.dialogFormVisible = false;
    },

    //启用/停用运营商
    statusHandle(row) {
      const vm = this;
      this.$confirm('是否进行此操作', '提示', {
        type: 'warning'
      }).then(() => {
        vm.$http.get(vm.api.update, {
          params: {
            code: row.code,
            name: row.name,
            contact: row.contact,
            tel: row.tel,
            province: row.province,
            city: row.city,
            address: row.address,
            number: row.number,
            status: row.status == 1 ? 0 : 1,
          }
        })
            .then((response) => {
              console.log(row)
              // console.log(response)
              if (response.data.status == 200) {
                this.$message({
                  type: 'success',
                  showClose: true,
                  message: response.data.desc
                })
              }
              this.loadData();
            })
      })
          .catch(() => {
            this.$message({
              type: 'info',
              showClose: true,
              message: '操作取消'
            })
          });

    },

    operatorList(row) {
      let vm = this;
      vm.$router.push({
        path: '/operatorList',
        query: {row: row}
      })
    },

    back() {
      let vm = this;
      vm.$router.back()
    }

  }
}
</script>

<style scoped>
.el-form-item {
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 0px;
}

.el-dialog__header {
  text-align: center;
}


</style>
