<template>
  <div class="app-container">
    <el-menu :default-active="activeIndex" style="" class="el-menu-demo" mode="horizontal">
      <el-menu-item index="1"
                    style="margin-left: 0;text-align: center; background-color: #028ac8!important;color: #fff;">
        区域管理({{viewTitle}})
      </el-menu-item>
      <div class="new_" @click="showAddDialog">新增</div> <!-- @click="new_file = true"-->
      <div class="back_" @click="handleReturn">返回</div>
    </el-menu>
    <!-- 新增弹框开始-->
    <regionAdd ref="reAdd" @closeLoding="newFails"/>
    <!--    <el-dialog width="60%" :append-to-body="true" :visible.sync="new_file" title="新增">-->
    <!--      <regionAdd ref="regionAdd" :psid="this.queryparams.params.psid" @closeLoding="newFails"/>&lt;!&ndash; :psid="this.queryparams.params.psid"&ndash;&gt;-->
    <!--    </el-dialog>-->
    <!-- 新增弹框结束-->
    <!-- 新增弹框开始-->
    <!-- :psid="psid"  :huixian="huixian" @closeLoding="newFails"-->
    <el-dialog width="60%" :append-to-body="true" :visible.sync="updateEcho_">
      <div class="poptitle">
        <div class="conter_title">名称：</div>
        <div class="conter_content" style="flex: 7">
          <el-input v-model="huixian.name" style="width: 300px;margin-left: 20px"/>
        </div>
      </div>
      <div class="poptitle">
        <div class="conter_title" style="">行政区域代码：</div>
        <div class="conter_content" style="flex: 7">
          <el-input v-model="huixian.districtCode" style="width: 300px;margin-left: 20px"/>
        </div>
      </div>
      <div class="poptitle">
        <div class="conter_title" style="">级别：</div>
        <div class="conter_content" style="flex: 7">
          <el-input v-model="huixian.level" type="namber" style="width: 300px;margin-left: 20px"/>
        </div>
      </div>
      <div class="poptitle">
        <div class="conter_title" style="">排序号：</div>
        <div class="conter_content" style="flex: 7">
          <el-input v-model="huixian.sortNo" type="namber" style="width: 300px;margin-left: 20px"/>
        </div>
      </div>
      <div style="width: 100%;display: flex;justify-content: center;margin-top: 20px;">
        <el-button @click="newWrit_bc">保存</el-button>
        <el-button @click="close_">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 新增弹框结束-->
    <div style="display: flex;width: 100%;margin: 0 auto ;border: 1px solid #dcdfe6;margin-top: 20px;padding: 10px 0">
      <div
        style="margin-left: 20px;display: flex;width: 300px;height: 40px;justify-content:space-around;align-items: center ;">
        <span>区域名称：</span>
        <el-input v-model="queryparams.params.name" clearable style="width: 200px"/>
      </div>
      <div
        style="margin-left: 20px;display: flex;width: 350px;height: 40px;justify-content:space-around;align-items: center ;">
        <span>行政区域代码：</span>
        <el-input v-model="queryparams.params.districtCode" clearable style="width: 200px"/>
      </div>
      <div style="width:140px;float: right;line-height: 30px;height: 30px;margin-top: 5px;margin-left: 30px;">
        <el-button size="mini" type="primary" @click="loadList(1)">查询</el-button>
        <el-button size="mini" type="primary" @click="reset()">重置</el-button>
      </div>
    </div>

    <div class="liebiaotitle" style="background-color: #fff;background-color: #0099ff;margin-top: 10px;">
      <div class="writ_title">
        <div style="margin-left: 10px">区域列表</div>
        <el-pagination :page-size="queryparams.size" :page-sizes="[10, 20, 50, 100]" background layout="sizes"
                       @size-change="pageSizeChange"/>
      </div>
    </div>
    <div>
      <el-table
        v-loading="tableloading"
        border
        :data="tableList"
        tooltip-effect="dark"
        style="width: 100%"
        :cell-class-name="addclass"
        :header-cell-style="{ background: '#f8f8f8', color: '#333' }"
      >
        <!-- <el-table-column type="index" width="50" label="序号" /> -->
        <el-table-column label="操作" width="220" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="primary" size="mini" @click="administration(scope.row.sid)">管理</el-button> -->
            <el-button type="primary" size="mini" @click="dataChang(scope.row.sid)">修改</el-button>
            <el-button type="danger" size="mini" @click="delOne(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="名称" align="center" prop="name"/>
        <el-table-column label="行政区域代码" align="center" prop="districtCode"/>
        <el-table-column label="排序" align="center" prop="sortNo"/>
        <!-- <el-table-column label="区域名称" align="center" prop="title">
          <template slot-scope="scope">
            <div class="bgcolor" @click="cnsDetails(scope.row.sid)">{{ scope.row.title }}</div>
          </template>
        </el-table-column> -->
      </el-table>
      <pagging :notshowdelete="true" :queryparams="queryparams" @reloading="loadList"/>
    </div>
    <el-dialog width="28%" :append-to-body="true" :visible.sync="cns_details" style="margin-top: -10vh;">
      <!-- 列表详情开始-->
      <div class="xqlb_con">
        <div class="xqlb_title">{{ deteils.title }}</div>
        <div class="xqlb_contents" style="white-space: pre-wrap;" v-html="deteils.contents"/>
      </div>
    </el-dialog>
    <!-- 列表详情结束-->
  </div>
</template>

<script>
  import req from '@/api/system/region/region' //请求方法
  import pagging from '@/components/Pagging' //删除一条数据
  import regionAdd from './component/regionAdd' //添加一条数据
  import regionAlter from "./component/regionAlter"; //修改一条数据
  import regionCity from "./regionCity"; //城市
  import regionDistrict from "./regionDistrict"; //区和县
  export default {
    name: "regionDistrict",
    components: {
      pagging,
      regionAdd,
      regionAlter,
      regionCity,
      regionDistrict,
    },
    data() {
      return {
        viewState: 3,//1、省 2、市 3、区/县
        viewTitle: '区/县',
        sid: '',//一条数据的sid
        psidCity: '',
        psid: '0',
        regionDto: {
          districtCode: '',
          level: 0,
          name: '',
          psid: this.psid,
          sortNo: 0
        },
        huixian: {},
        tableloading: false,
        title: '',
        contents: '',
        hxtitle: '',
        hxcontents: '',
        queryparams: {
          total: 0,
          current: 1,
          params: {
            districtCode: '',
            name: '',
            psid: '',//存入从市级页面接收到sid
          },
          size: 10
        },
        name: '',
        activeIndex: '1', //报错:格式有问题，把数字1改成字符串'1'
        new_file: false,
        updateEcho_: false,
        tableList: [],
        hxsid: '',
        cns_details: false,
        deteils: {
          title: '',
          contents: ''
        }
      }
    },
    created() {
      this.new_file = false
      this.loadList()
    },
    methods: {
      showAddDialog() {
        var psid = this.queryparams.params.psid
        var level = 3
        this.$refs['reAdd'].showAdd(psid, level);
      },
      //跳转到区
      showDistrict() {
        this.viewState = 3;
        this.loadList()
        // this.$refs['reAdd'].regionDto.psid = this.queryparams.params.psid;
        console.log('333区级页面接收到的sid', this.queryparams.params.psid)
        console.log('333区级页面接收到的psidCity', this.psidCity)
      },
      handleReturn() {
        this.tableList = []
        this.$parent.queryparams.params.psid = this.psidCity
        this.$emit('goBack')
      },
      // 修改保存
      newWrit_bc() {
        this.regionDto.districtCode = this.huixian.districtCode
        this.regionDto.level = this.huixian.level
        this.regionDto.name = this.huixian.name
        this.regionDto.sortNo = this.huixian.sortNo
        this.regionDto.psid = this.psid
        console.log('333区级-修改保存获取的regionDto', this.regionDto);
        console.log('333区级-修改保存获取的psid', this.psid);
        console.log('333区级-修改保存获取的sid', this.sid);
        req.update(this.regionDto, this.sid).then(resp => {
          console.log('这里是修改后的regionDto', this.regionDto, this.sid)
          if (resp && resp.success) {
            this.$message({
              type: 'success',
              message: resp.msg,
              showClose: true
            })
            if (resp.code === '200') {
              this.regionDto.districtCode = ''
              this.regionDto.name = ''
              this.regionDto.psid = ''
              this.regionDto.level = ''
              this.regionDto.sortNo = 0
              this.updateEcho_ = false
              this.loadList()
            }
          } else {
            this.$message.error(resp.msg)
          }
        })
      },
      //
      newFails() {
        this.loadList()
        this.new_file = false
        this.updateEcho_ = false
        this.psid = ''
        this.huixian = {}
      },

      // 重置
      reset() {
        this.queryparams.params.name = ''
        this.queryparams.params.districtCode = ''
      },
      addclass(row) {
        if (row.columnIndex === 1) {
          return 'bgcolor'
        }
      },
      pageSizeChange(val) {
        this.queryparams.size = val
        this.loadList()
      },
      // 关闭弹框
      close_() {
        this.new_file = false
        this.updateEcho_ = false
      },

      // 列表
      loadList(flag) {
        const _this = this
        this.tableloading = true
        if (flag == 1) {
          this.queryparams.current = 1
        }
        req.pagerList(this.queryparams).then(resp => {
          this.tableloading = false
          if (resp && resp.success) {
            const data = resp.data
            _this.queryparams.total = data.total
            _this.tableList = []
            _this.tableList = data.records
          }
        })
      },

      // 删除
      delOne(index, row) {
        this.$confirm('此操作将删除记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.doDelete(row.sid)
          })
          .catch(() => {
          })
      },

      doDelete(sid) {
        const _this = this
        req.delete(sid).then(resp => {
          console.log('resp' + resp)
          if (resp && resp.success) {
            _this.$message({
              type: 'success',
              message: resp.msg,
              showClose: true
            })
            _this.loadList()
          } else {
            this.$message.error(resp.msg)
          }
        })
      },

      // 修改回显
      dataChang(sid) {
        const _this = this
        req.updateEcho(sid).then(resp => {
          console.log('区级修改回显resp', resp)
          if (resp && resp.success) {
            const data = resp.data
            _this.sid = data.sid
            _this.psid = data.psid
            console.log('333修改回显data', data)
            this.huixian = data
            _this.updateEcho_ = true
          } else {
            _this.$message.error(resp.msg)
          }
        })
      },
      // 修改保存
      newWrit_xg() {
        console.log(this.hxcontents)
        const dto = {
          title: this.hxtitle,
          contents: this.hxcontents,
          sid: this.hxsid
        }
        console.log(dto)
        // req.updateSave(dto).then(resp => {
        //   if (resp && resp.success) {
        //     this.$message({
        //       type: 'success',
        //       message: resp.msg,
        //       showClose: true
        //     })
        //     this.updateEcho_ = false
        //     this.hxtitle = ''
        //     this.hxcontents = ''
        //     this.loadList()
        //   } else {
        //     this.$message.error(resp.msg)
        //   }
        // })
      }
    }
  }
</script>

<style scoped lang="scss">
  .editor {
    line-height: normal !important;
    /* height: 192px; */
    width: 93%;
    margin-top: 20px;
    margin-left: 20px;
  }

  .xqlb_con {
    width: 100%;
    min-height: 500px;
    padding: 10px 15px 10px 15px;
    border: 1px solid #dedede;
    margin: 0 auto;

    .xqlb_title {
      width: 90%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-weight: 1000;
      margin: 0 auto;
    }

    .xqlb_contents {
    }
  }

  .el-dialog__title {
    text-align: center !important;
    background-color: #0099ff !important;
    color: #fff !important;
  }

  .tab_left {
    text-align: right !important;
    padding-right: 30px !important;
  }

  .writ_title {
    font-weight: bold;
    margin: 0px 0px;
    color: #fff;
    padding: 5px 10px;
    background-color: #0099ff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .poptitle {
    width: 97%;
    height: 50px;
    line-height: 50px;
    border: 1px solid #dedede;
    display: flex;

    .conter_title {
      flex: 3;
      height: 50px;
      border-right: 1px solid #dedede;
      text-align: center;
      line-height: 50px;
    }

    .conter_content {
      flex: 7;
    }
  }

  .popitem {
    width: 97%;
    min-height: 300px;
    line-height: 50px;
    border-left: 1px solid #dedede;
    border-right: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    display: flex;

    .popitem_title {
      flex: 3;
      min-height: 300px;
      border-right: 1px solid #dedede;
      text-align: center;
      line-height: 300px;
    }
  }

  .textarea__inner {
    overflow-y: auto;
    min-height: 300px !important;
    /* overflow-y: auto;兼容ie  */
  }

  .bgcolor {
    color: #028ac8;
    /* text-decoration: underline; 下划线*/
    cursor: pointer;
  }

  .el-menu-demo {
    display: flex; /*暂定*/
  }

  .new_ {
    /*margin-left: 150px;*/
    text-align: center;
    color: #9ea1a6 !important;
    background-color: #fff;
    border: 1px solid #dedede;
    width: 100px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    /*position: absolute; !*暂定*!*/
    margin-left: 25px; /*暂定*/
  }

  /*暂定*/
  .back_ {
    margin-left: 25px;
    text-align: center;
    color: #9ea1a6 !important;
    background-color: #fff;
    border: 1px solid #dedede;
    width: 100px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
  }

  .el-menu.el-menu--horizontal {
    padding-bottom: 10px;
    border-bottom: 1px solid #018ad2 !important;
    /*border-bottom: 2px solid #00ccff !important;*/
  }

  .el-submenu__title {
    text-align: center;
    line-height: 35px !important;
    width: 130px !important;
    height: 35px !important;
    padding: 0 !important;
  }

  .el-menu--horizontal > .el-menu-item .is-active {
    border-bottom: 1px solid #fff !important;
  }

  .el-menu-item.is-active {
    color: #fff !important;
    text-align: center;
    line-height: 35px;
    min-width: 100px !important;
    height: 35px !important;
  }

  .el-menu--horizontal > .el-menu-item {
    margin-left: 20px;
    text-align: center;
    line-height: 35px;
    min-width: 100px !important;
    height: 35px !important;
    border: 1px solid #dedede;
    border: 1px solid #dedede !important;
    text-align: center;
  }

  .el-submenu__title {
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid transparent;
    color: #fff;
    font-size: 20px;
    text-align: center;
  }

  .el-menu--popup {
    min-width: 100px !important;
  }

  .new_undertak {
    cursor: pointer;
    color: #909399;
    font-size: 14px;
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid #909399;
    text-align: center;
  }

  .new_undertak:hover {
    color: #000;
  }
</style>
