<template>
  <div id="project">
    <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>
        <div style="margin-bottom: 12px">
          <span style="margin-left: 3px; font-size: 16px; color: #545c64">运营商编号：{{operatorData.number}}</span>
          <span style="margin-left: 20px; font-size: 16px;color: #545c64">运营商名称：{{operatorData.name}}</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.customer"></el-input>
            </el-form-item>
            <el-form-item label="客户电话">
              <el-input placeholder="客户电话" size="mini" v-model="searchFormData.customerTel"></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: 70% ; margin-left: 300px ;">
              <el-form label-position="left" :model="formData">
                <el-row style="margin-left: 15px">
                  <el-form-item label="项目名称">
                    <el-input v-model="formData.name"></el-input>
                  </el-form-item>
                  <el-form-item label="项目编号">
                    <el-input v-model="formData.number"></el-input>
                  </el-form-item>
                </el-row>
                <el-row style="margin-left: 15px">
                  <el-form-item label="项目描述">
                    <el-input v-model="formData.description"></el-input>
                  </el-form-item>
                  <el-form-item label="客户名称">
                    <el-input v-model="formData.customer"></el-input>
                  </el-form-item>
                </el-row>

                <el-row style="margin-left: 0px">
                  <el-form-item label="运营商编号">
                    <el-input v-model="operatorData.number" readonly="readonly"></el-input>
                  </el-form-item>

                  <el-form-item label="客户电话">
                    <el-input v-model="formData.customerTel"></el-input>
                  </el-form-item>
                </el-row>

                <el-form-item label="省份" style=" text-align: right;margin-right: 38px;margin-left: 52px ;">
                  <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="城市">
                  <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-form-item label="具体地址" style="margin-left: 24px">
                  <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">确 定</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="description" label="项目描述"></el-table-column>
            <el-table-column prop="customer" label="客户名称"></el-table-column>
            <el-table-column prop="customerTel" 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">
                <el-button type="text" size="medium" @click="showEdit(scope.row)">编辑</el-button>
                <el-button type="text" size="medium" @click="projectList(scope.row)">网关</el-button>
                <el-button type="text" size="medium" @click="del(scope.row)" style="color: #c01920">删除</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: 'project',
  data() {
    return {

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

      api: {
        listOperator: this.$api.operator.list,

        list: this.$api.project.list,
        delete: this.$api.project.delete,
        add: this.$api.project.add,
        update: this.$api.project.update,
      },



      addOrEdit: 1,

      dialogFormVisible: false,
      dialogFormVisible1: false,

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

      operatorData:{
        name:'',
        number:'',
        code:'',
        status:'',
      },


      tableData:
          [{
            name: '1',
            number: '1',
            description: '1',
            customer: '1',
            customerTel: '1',
            province: '1',
            city: '1',
            address: '1',
            operatorName:'',
            operatorNumber:'',
          }],
      formData: {
        name: '1',
        number: '1',
        description: '1',
        customer: '1',
        customerTel: '1',
        province: '1',
        city: '1',
        address: '1',
        operatorNumber: '',
        code: '',
        valid: '',
      },
      searchFormData:
          {
            name: '',
            number: '',
            customer: '',
            customerTel: '',
            province: '',
            city: '',
            address: '',
            operatorNumber: '',
          }
    }
  },


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

  },

  watch: {
    'searchFormData.province'(oldValue, newValue) {

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

      this.searchFormData.city = ''

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

    'formData.province'(oldValue, newValue) {
      console.log(oldValue)
      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)
    },

    getOperatorNumber() {
      const vm = this;
      vm.$http.get(vm.api.listOperator).then((resp) => {
        vm.operators = resp.data.data.operators
      })
    },


    loadData(index) {

      var row = this.$route.query.row;

      console.log(row)

      this.operatorData = row

      console.log(this.operatorData.name)

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

          name: this.searchFormData.name,
          number: this.searchFormData.number,
          province: this.searchFormData.province,
          city: this.searchFormData.city,
          address: this.searchFormData.address,
          customer: this.searchFormData.customer,
          customerTel: this.searchFormData.customerTel,
          operatorNumber: this.operatorData.number,
        }
      })
          .then((response) => {
            vm.pager = response.data.data.pager

            vm.tableData = response.data.data.projects;
          })
    }
    ,
    search() {
      this.loadData();
    }
    ,
    showAdd() {
      this.dialogFormVisible = true;

      this.formData.name = '';
      this.formData.province = '';
      this.formData.description = '';
      this.formData.city = '';
      this.formData.customer = '';
      this.formData.customerTel = '';
      this.formData.address = '';
      this.formData.number = '';
      this.formData.operatorNumber = '',
          this.formData.description = '';

      this.addOrEdit = 1

      this.getOperatorNumber()
    }
    ,

    showEdit(row) {

      console.log()

      this.dialogFormVisible = true;

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

      this.addOrEdit = 2

      this.getOperatorNumber()
    }
    ,


    addOrEditMehtond() {
      const vm = this;
      if (this.addOrEdit == 2) {
        vm.$http.get(vm.api.update, {
          params: {
            code: this.formData.code,
            name: this.formData.name,
            number: this.formData.number,
            description: this.formData.description,
            province: this.formData.province,
            city: this.formData.city,
            address: this.formData.address,
            operatorNumber: this.formData.operatorNumber,
            customer: this.formData.customer,
            customerTel: this.formData.customerTel,

          }
        })
            .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,
            number: this.formData.number,
            description: this.formData.description,
            province: this.formData.province,
            city: this.formData.city,
            operatorNumber: this.formData.operatorNumber,
            address: this.formData.address,
            customer: this.formData.customer,
            customerTel: this.formData.customerTel,
          }
        })
            .then((response) => {

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

                this.dialogFormVisible = false;

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

                this.loadData();
              }
              if (response.data.status == 500) {

                this.dialogFormVisible = false;

                this.$message({
                  type: 'error',
                  showClose: true,
                  message: '未找到运营商'
                })

                this.loadData();
              }
            })
      }
    }
    ,

    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.dialogFormVisible = false;
    }
    ,


    gateway() {
      let vm = this;
      vm.$router.push('/gateway')
    }
    ,
    back(){
      let vm = this;
      vm.$router.back()
    },

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

  }
}

</script>

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

</style>
