<template>
  <el-form  ref="form" :model="form" :rules="rules" label-width="150px">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" :disabled="isDetail" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="平台" prop="platformCode">
          <el-select v-model="form.platformCode" placeholder="请选择平台" clearable :disabled="isDetail">
            <el-option
              v-for="data in platformList"
              :key="data.code"
              :label="data.title"
              :value="data.code"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="截止日期" prop="endDate">
          <el-date-picker clearable
                          v-model="form.endDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择截止日期"
                          :disabled="isDetail">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="稿费下限" prop="feeDown">
          <el-input-number :precision="2" min="0" v-model="form.feeDown" placeholder="请输入稿费下限" :disabled="isDetail" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="稿费上限" prop="feeUp">
          <el-input-number :precision="2" min="0" v-model="form.feeUp" placeholder="请输入稿费上限" :disabled="isDetail" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="是否需自报价" prop="isSelfPrice">
          <el-select v-model="form.isSelfPrice" placeholder="请选择是否需自报价" :disabled="isDetail">
            <el-option
              v-for="dict in dict.type.true_or_false"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">

      <el-col :span="8">
        <el-form-item label="招募名额" prop="needNum">
          <el-input-number :precision="0" :min="0" v-model="form.needNum" placeholder="请输入招募名额" :disabled="isDetail" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="是否公开品牌" prop="isShowBrand">
          <el-select v-model="form.isShowBrand" placeholder="请选择是否公开品牌" :disabled="isDetail">
            <el-option
              v-for="dict in dict.type.true_or_false"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="品牌" prop="brand">
          <el-input v-model="form.brand" placeholder="请输入品牌" :disabled="isDetail" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">

      <el-col :span="8">
        <el-form-item label="地区要求" prop="region">
          <el-select v-model="form.province" @change="provinceChange" placeholder="请选择省份" :disabled="isDetail">
            <el-option
              v-for="item in provinceList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
          <el-select style="margin-top: 5px" v-model="form.city" placeholder="请选择城市" :disabled="isDetail">
            <el-option
              v-for="item in cityList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="粉丝要求下限" prop="fansDown">
          <el-input-number :precision="0" min="0" v-model="form.fansDown" placeholder="粉丝要求下限" :disabled="isDetail" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="粉丝要求上限" prop="fansUp">
          <el-input-number :precision="0" min="0" v-model="form.fansUp" placeholder="粉丝要求上限" :disabled="isDetail" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form-item label="博主类型" prop="bloggerTypeList">
          <el-select v-model="form.bloggerTypeList" multiple filterable placeholder="请选择博主类型" :disabled="isDetail">
            <el-option
              v-for="data in bloggerList"
              :key="data.code"
              :label="data.title"
              :value="data.code"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="微信群码图片" prop="groupImage">
          <image-upload :limit="1" v-model="form.groupImage" :disabled="isDetail" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">

      <el-col :span="16">
        <el-form-item label="产品图" prop="images">
          <image-upload :limit="9" v-model="form.images" :disabled="isDetail" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="通告明细" prop="detail">
      <Editor v-model="form.detail" style="height: 300px" placeholder="请输入内容" :read-only="isDetail" />
    </el-form-item>
  </el-form>
</template>

<script>
import {getRegion} from "@/api/base/util";
import {listByCode} from "@/api/base/category";
import log from "@/views/monitor/job/log.vue";

export default {
  name: "Notice",
  props: ['isDetail'],
  dicts: ['notice_type', 'notice_collect', 'dl_approval_status', 'true_or_false'],
  data() {
    return {
      // 表单参数
      form: {},
      platformList:[],
      provinceList:[],
      cityList:[],
      bloggerList:[],
      // 表单校验
      rules: {
        title: [
          { required: true, message: "标题不能为空", trigger: "blur" }
        ],
        platformCode: [
          { required: true, message: "平台code不能为空", trigger: "change" }
        ],
        feeDown: [
          { required: true, message: "稿费下限不能为空", trigger: "blur" }
        ],
        isSelfPrice: [
          { required: true, message: "是否需自报价不能为空", trigger: "change" }
        ],
        endDate: [
          { required: true, message: "截止日期不能为空", trigger: "blur" }
        ],
        pic: [
          { required: true, message: "图文/视频/不限不能为空", trigger: "change" }
        ],
        collect: [
          { required: true, message: "单品/合集/不限不能为空", trigger: "change" }
        ],
        detail: [
          { required: true, message: "通告明细不能为空", trigger: "blur" }
        ],
        brand:[
          { required: true, message: "品牌不能为空", trigger: "blur" }
        ],
        fansDown:[
          { required: true, message: "粉丝下限不能为空", trigger: "blur" }
        ]
      },
    }
    },
    mounted() {
      this.getPlatform()
      this.getProvince()
      this.getBloggerList()
    },
    methods: {
      provinceChange(e){
        console.log(e,276)
        //在provicenList 中过滤出来 name 等于 e的
        let provinceId = this.provinceList.filter(item=>{
          return item.name == e
        })[0].cityId
        this.getCity(provinceId)
      },
      getProvince(){
        getRegion(0).then(res=>{
          this.provinceList = res.data
        })
      },
      getCity(provinceId){
        getRegion(provinceId).then(res=>{
          this.cityList = res.data
        })
      },
      getPlatform(){
        listByCode({code:'dl_platform'}).then(res=>{
          this.platformList = res.data
        })
      },
      getBloggerList(){
        listByCode({code:'dl_blogger_type'}).then(res=>{
          this.bloggerList = res.data
        })
      },

    }
    }
</script>
