<template>
  <div class="card-container">
    <!-- 添加或修改基本配置对话框 -->
    <div style="margin: 100px">
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-row style="display: flex;justify-content: left">
            <span style="color: #ff4949;
            margin-right: 4px;padding: 15px 0px;"
            >*</span>
            <el-form-item label="首页Banner图配置" style="margin-left: -10px!important;">
              <UploadImg :imgList="bannerImgList" @changeImg="changeSetImg" :count="3"/>
            </el-form-item>
        </el-row>
        <el-form-item>
          <div style="width: 65%;color: #7F7F7F;">建议尺寸：710 * 200 px ，最多3张，至少一张。</div>
        </el-form-item>
        <el-form-item label="取消订单限制" prop="timeLimit">
          <el-input v-model="form.timeLimit" placeholder="请输入时间" style="width: 200px" maxlength="4"/>
          <span>&nbsp;&nbsp;分钟/离入场前</span>
        </el-form-item>
         <el-form-item>
           <div style="width: 65%;">注：设置租客在下单后，车位租赁开始时间前多长时间允许【取消订单】。例如：设置时长限制30分钟，租赁开始时间 ：2022.03.18 10:40，那么租客在2022.03.18 10:10 前均可取消订单。如果租赁开始时间已过，租客再下单，则不允许取消订单。</div>
         </el-form-item>
        <el-form-item label="平台抽成比例" prop="stage">
          <el-input v-model="form.stage" placeholder="请输入平台抽成比例" style="width: 200px" maxlength="3"/>
          <span>&nbsp;&nbsp;%</span>
        </el-form-item>
        <el-form-item label="客服电话" prop="servicePhone">
          <el-input v-model="form.servicePhone" placeholder="请输入客服电话" style="width: 200px" maxlength="12"/>
        </el-form-item>
        <el-form-item label="短信通知" prop="noticePhone">
          <div  v-for="(item, index) in formArr" :key="index" style="display: flex;margin-bottom: 10px;">
          <el-input v-model="item.noticePhone" placeholder="请输入短信通知" style="width: 200px;margin-right: 10px;" maxlength="11"/>
          <el-input v-model="item.name" placeholder="请输入姓名" style="width: 200px" maxlength="10"/>
          <el-select v-model="item.parkingId" placeholder="请选择停车场" style="width: 20%"
                       @change="handleChangeParking(parkingId,index)"
            >
              <el-option
                v-for="item in parkNameList"
                :key="item.id"
                :label="item.parkingName"
                :value="item.id"
              ></el-option>
          </el-select>
          <img src="../../assets/image/jiahao.jpg" @click="add" />
          <img src="../../assets/image/jianhao.png" @click="del(index)" v-if="index!=0"/>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin: 50px 120px;">
        <el-button type="primary" @click="submitForm">保 存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { listParkName } from '@/api/carManage/parking'
// 文件上传组件
import UploadImg from "@/components/UploadImg"
import {
  listConfig,
  getConfig,
  delConfig,
  addConfig,
  updateConfig,
  exportConfig
} from '@/api/baseConfig/config'
import {
  getPhoneList
} from '@/api/baseConfig/phone'

export default {
  name: 'Config',
  components: {UploadImg},
  data() {
    return {
      // 选择停车场名称列表
      parkNameList: [],
      //短信通知列表
      bannerImgList: [],
      //短信通知列表
      formArr: [
        {
          name: '',
          noticePhone: '',
          parkingId: ''
        }
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 基本配置表格数据
      configList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        param: {
          timeLimit: null,
          stage: null,
          servicePhone: null,
          noticePhone: null
        }
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        timeLimit: [
          {
            required: true,
            pattern: /^(\+?[0-9][0-9]*)$/,
            trigger: 'blur', message: '请输入大于等于0的整数'
          }
        ],
        stage: [
          {
            required: true,
            pattern: /^([0-9]{1,2}|100)$/,
            message: "请输入0~100之间的整数",
            trigger: 'blur'
          }
        ],
        servicePhone: [
          {
            required: true,
            pattern: /^(1[3|4|5|6|7|8|9][0-9]\d{8})$|(^(\d{3,4}-)?\d{7,8})$/,
            trigger: 'blur', message: '请输入正确的客服电话'
          }
        ],
        noticePhone: [
          {
            required: false,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    }
  },
  created() {
    // 查询停车场名称列表
    listParkName({}).then(response => {
      this.parkNameList = response.result
    })
    this.getList()
  },
  methods: {
    // 选择停车场事件
    handleChangeParking(parkingId,index) {
      let obj = {};
      obj = this.parkNameList.find((item) => { //this.areaList 是通过接口请求下来的区域列表
        return item.id === parkingId; //筛选出匹配数据
      });
      this.form.parkingId = obj.id;
      this.form.parkingName = obj.parkingName;
      this.formArr[index].parkingId = obj.id;
      this.formArr[index].parkingName = obj.parkingName;
    },
    changeSetImg(arrList) {
      this.bannerImgList = arrList;
      console.log(this.bannerImgList)
    },
    add() {
      // if(this.formArr.length>=10){
      //   this.msgError("最多添加10条");
      //   return;
      // }
      this.formArr.push({
        value: ''
      })
      console.log(this.formArr)
    },
    del(index) {
      this.formArr.splice(index, 1)
    },
    /** 查询基本配置列表 */
    getList() {
      this.bannerImgList = [];
      this.loading = true
      listConfig(this.queryParams).then(response => {
        this.configList = response.records
        this.form = this.configList[0]
        if(null!=this.configList && this.configList.length>0){
          this.form.stage = this.configList[0].stage*100
          // banner图片赋值
          if (null != this.configList[0].imgUrlOne && this.configList[0].imgUrlOne != '') {
            this.bannerImgList.push(this.configList[0].imgUrlOne)
          }
          if (null != this.configList[0].imgUrlTwo && this.configList[0].imgUrlTwo != '') {
            this.bannerImgList.push(this.configList[0].imgUrlTwo)
          }
          if (null != this.configList[0].imgUrlThree && this.configList[0].imgUrlThree != '') {
            this.bannerImgList.push(this.configList[0].imgUrlThree)
          }
        }
        this.total = response.total
        this.loading = false


      })
      // 获取短信通知数据
      getPhoneList().then(response => {
        this.formArr = response.result
        if(this.formArr==undefined || this.formArr==null ||this.formArr.length==0){
          let obj ={};
          obj.name='';
          obj.noticePhone ='';
          obj.parkingId = '';
          this.formArr.push(obj)
        }
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        timeLimit: null,
        stage: null,
        servicePhone: null,
        noticePhone: null,
        createTime: null,
        updateTime: null
      }

      this.resetForm('form')
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id =
        row.id || this.ids
      getConfig(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改基本配置'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            this.form.phoneList = this.formArr
            if(null!=this.bannerImgList&& this.bannerImgList.length>0){
              let tempList = []
               for(let i=0;i<this.bannerImgList.length;i++){
                 let item= this.bannerImgList[i];
                 if(item.url){
                   tempList.push(item.url)
                 }else if(item){
                   tempList.push(item)
                 }
               }
              this.form.bannerImgList = tempList;
            }else{
              this.msgError("请至少上传一张图片")
              return;
            }
            updateConfig(this.form).then(response => {
              if(response.code!=200){
                return this.warning(response.msg)
              }
              this.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addConfig(this.form).then(response => {
              this.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$confirm('是否确认删除基本配置编号为"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delConfig(ids)
      }).then(() => {
        this.getList()
        this.msgSuccess('删除成功')
      })
    }
  }
}
</script>
