<template>
  <div v-loading="loading" class="addSite">
    <div class="head-title">
      <span @click="CommonJump('guideCarSiteList')" class="blue point">站点管理</span> / 编辑站点管理
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:60%">

        <el-form-item label="站点名称" prop="SiteName" class="is-required">
          <el-input v-model="addMsg.SiteName" placeholder="请输入站点名称" />
        </el-form-item>


        <el-form-item label="是否启用" prop="IsEnable">
          <el-radio v-model="addMsg.IsEnable" :label="1">是</el-radio>
          <el-radio v-model="addMsg.IsEnable" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="司导区域"  class="is-required" >
          <div class="gez_list el-card"  v-if="addMsg.RegionList.length>0">
            <div style="width: 500px;" >
              <div >区域：<span v-for="(item,index) in addMsg.RegionList" :key="index" class="quyu">
                    {{item.RegionName}}</span>
              </div>
            </div>
            <div style="width: 110px;display: flex;flex-direction: row;justify-content: space-around">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top" >
                <img src="../../assets/img/setup/edit.png" alt="" class="imgstyle" @click="edit()">
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <img src="../../assets/img/setup/del.png" alt="" class="imgstyle" @click="delete_b()">
              </el-tooltip>
            </div>
          </div>
          <span style="color: #409EFF;font-size: 14px;cursor: pointer;" @click="addOf" v-if="addMsg.RegionList.length==0">+新增规则</span>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>
    <el-dialog title="新增司导地区" :visible.sync="dialogFormVisible"  >
      <el-form :model="addMsg" :rules="rules" ref="addMsg">
        <el-form-item label="司导地区" prop="List">
          <region_Choice @event1="change($event)"  ref="child"></region_Choice>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Addto()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import region_Choice from '../setup/view/regionChoice'
  export default {
    data() {
      return {
        addMsg: {
          ID: 0,
          SiteName:'',
          RegionList:[],
          IsEnable:0
        },
        rules: {

          SiteName: [{
            required: true,
            message: '请输入站点名称',
            trigger: 'blur'
          }],

        },
        loading: false,
        dialogFormVisible:false,


      };
    },
    created() {

      if(this.$route.query.ID){
        this.getData(this.$route.query.ID)
      }
    },
    components:{
      region_Choice,
    },
    methods: {



      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost("/api/GuideCar/AddOrUpdateGuideCarSite", this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.CommonJump('guideCarSiteList');
                this.Success(res.data.message);
              } else {
                this.Error(res.data.message);
              }
            })
          } else {
            return false;
          }
        });
      },
      edit(){
        this.dialogFormVisible=true;
        setTimeout(()=>{
          this.$refs.child.Receive(this.addMsg.RegionList)
        },1000)
      } ,
      delete_b(){
        this.addMsg.RegionList=[]

      },
      change(data){
        this.List = data;

      },
      Addto(){
        this.dialogFormVisible=false
        this.addMsg.RegionList =this.List;
      },
      addOf(){
        this.List=[]

        this.dialogFormVisible=true;
        this.isedit=false;//设置为编辑状态
        setTimeout(()=>{
          this.$refs.child.Receive(this.List)
        },1000)
      },

      getData(ID) {
        this.loading = true;
        this.apipost("/api/GuideCar/GetGuideCarSiteModel", {
          ID: ID
        }, res => {
          this.loading = false;
          this.addMsg = res.data.data;
        })
      },
    },
    mounted() {
    }
  };
</script>
<style>
  .app-add-cat .el-checkbox-group {
    font-size: 14px !important;
  }

  .app-add-cat .el-checkbox {
    margin-right: 0;
  }

  .app-add-cat .el-dialog__body {
    padding: 10px 20px !important;
  }

  .app-add-cat .tag-box .tag-item {
    margin-right: 5px;
  }

  .app-add-cat .tag-box {
    margin: 20px 0;
  }

  .app-add-cat .app-goods-cat-list .active {
    background: #FAFAFA;
  }

  .app-add-cat .app-goods-cat-list .cat-item {
    cursor: pointer;
    padding: 5px 10px;
  }

  .app-add-cat .app-goods-cat-list {
    border: 1px solid #E8EAEE;
    border-radius: 5px;
    margin-top: -5px;
    padding: 10px 0;
    overflow: scroll;
    height: 400px;
  }

  .addSite .tip {
    margin-left: 10px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: #ff4544;
    background-color: #FEF0F0;
    padding: 0 20px;
    border-radius: 5px;
  }

  .addSite .app-image {
    background-size: cover;
    background-position: center center;
    width: 80px;
    height: 80px;
    border-radius: 0%;
  }

  .addSite .setTable .el-table__body .cell {
    display: flex;
    align-items: center;

  }

  .addSite .commonLabel .el-form-item__label {
    margin-top: -4px;
  }

  .addSite .discount .el-form-item__label {
    padding-right: 30px;
    margin-top: -4px;
  }

  .addSite .el-form-item .elzk {
    position: absolute;
    left: -25px;
    top: 8px;
  }

  .addSite .el-form-item {
    position: relative;
  }

  .addSite .blue {
    color: #409EFF;

  }

  .addSite .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
  .addSite .gez_list{
    width: 650px;
    margin-bottom: 12px;
    padding: 20px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    color: #303133;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

  }
  .addSite .quyu{
    background-color: #f4f4f5;
    color: #909399;
    padding: 10px;
    line-height: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    margin: 5px;
  }
  .addSite .imgstyle{
    width: 32px;
    height: 32px;
    margin: 0 5px;
  }
</style>
