<template>
  <div>
    <el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-col :span="24">
          <el-form-item label="媒体投放信息" label-width='110px'></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="投放类型" prop="launchType">
            <el-select clearable v-model="form.launchType" placeholder="请选择投放类型">
              <el-option
                v-for="item in launchTypeList"
                :key="item.F_ValueId"
                :label="item.F_Value"
                :value="item.F_ValueId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="媒体名称" prop="mediaName">
            <el-select clearable v-model="form.mediaName" placeholder="请选择媒体名称">
              <el-option
                v-for="item in mediaName"
                :key="item.F_ID"
                :label="item.F_Name"
                :value="item.F_ID">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="刊登号码">
            <el-input v-model="form.publicationNumber" placeholder="请输入刊登号码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="400号码">
            <el-input v-model="form.number" placeholder="请输入400号码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="绑定商品">
            <el-select v-model="form.product"
              multiple
              filterable
              clearable
             placeholder="请选择绑定商品">
              <el-option
                v-for="item in shopList"
                :key="item.F_ProductId"
                :label="item.F_ProductNumberName"
                :value="item.F_ProductId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="投放日期">
            <el-date-picker v-model="form.releaseDate" value-format="yyyy-MM-dd" type="date" placeholder="请选择投放日期" style="width:199px"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="日费用">
            <el-input v-model="form.dailyExpenses" onkeyup="value=value.replace(/[^\d.]/g,'')" placeholder="请输入日费用"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-form ref="playPlanRef" :model="playPlanForm" label-width="100px">
        <el-col :span="24">
          <el-form-item label="播放计划信息" label-width="110px"></el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="播出时间">
            <el-time-picker value-format="HH:mm:ss" v-model="playPlanForm.BroadcastTime" type="date" placeholder="请选择开始时间"></el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="播放日期">
            <el-checkbox-group v-model="playPlanForm.week" @change="handleChange">
              <el-checkbox label="周一" name="type" ></el-checkbox>
              <el-checkbox label="周二" name="type" ></el-checkbox>
              <el-checkbox label="周三" name="type" ></el-checkbox>
              <el-checkbox label="周四" name="type" ></el-checkbox>
              <el-checkbox label="周五" name="type" ></el-checkbox>
              <el-checkbox label="周六" name="type" ></el-checkbox>
              <el-checkbox label="周日" name="type" ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="播放说明">
            <el-input v-model="playPlanForm.playInstructions" placeholder="请输入播放说明" style="width:200px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button type="info" @click="addPlan">添加计划</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划时间">
            <el-date-picker
              v-model="playPlanForm.startDate"
              :picker-options="pickerOptions"
              type="daterange"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
              align="left"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="广告名称">
             <el-select clearable v-model="playPlanForm.advertisementName" placeholder="请选择广告名称">
              <el-option
                v-for="item in advertisementList"
                :key="item.F_ValueId"
                :label="item.F_Value"
                :value="item.F_ValueId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="播出时长">
            <el-input v-model="playPlanForm.broadcost" placeholder="请输入播出时长" onkeyup="value=value.replace(/[^\d.]/g,'')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="播出次数">
            <el-input v-model="playPlanForm.playNumber" placeholder="请输入播出次数" onkeyup="value=value.replace(/[^\d.]/g,'')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="状态">
            <el-select clearable v-model="playPlanForm.state" placeholder="请选择状态">
              <el-option label="启动" value="0"></el-option>
              <el-option label="暂停" value="1"></el-option>
              <el-option label="终止" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>  
    </el-row>
    <el-row v-for="(item,index) in addPlayPlanForm" :key="index">
      <el-form  label-width="100px" >
        <el-col :span="5">
          <el-form-item label="播出时间">
            <el-input v-model='item.F_BroadcastTime' disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="播放日期">
            <el-checkbox-group v-model="item.F_PlayDateList">
              <el-checkbox label="周一" name="type" disabled></el-checkbox>
              <el-checkbox label="周二" name="type" disabled></el-checkbox>
              <el-checkbox label="周三" name="type" disabled></el-checkbox>
              <el-checkbox label="周四" name="type" disabled></el-checkbox>
              <el-checkbox label="周五" name="type" disabled></el-checkbox>
              <el-checkbox label="周六" name="type" disabled></el-checkbox>
              <el-checkbox label="周日" name="type" disabled></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="播放说明">
            <el-input v-model="item.F_Describe" placeholder="请输入播放说明" disabled style="width:200px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button v-model="item.key" type="info" @click="removePlan(item.key)">删除计划</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划时间">
            <el-date-picker
              disabled
              v-model="item.startDate"
              :picker-options="pickerOptions"
              class="filter-item"
              type="daterange"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
              align="left"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="广告名称">
            <el-select disabled v-model="item.F_Name" placeholder="请选择广告名称">
              <el-option
                v-for="item in advertisementList"
                :key="item.F_ValueId"
                :label="item.F_Value"
                :value="item.F_ValueId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="播出时长">
            <el-input v-model="item.F_BroadcastDuration" onkeyup="value=value.replace(/[^\d.]/g,'')" placeholder="请输入播出时长" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="播出次数">
            <el-input v-model="item.F_PlayCount" onkeyup="value=value.replace(/[^\d.]/g,'')" placeholder="请输入播出次数" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="状态">
            <el-select v-model="item.F_State" placeholder="请选择状态" disabled>
              <el-option
                v-for="item in startPlan"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-form  ref="changeInfoRef" :model="changeInfoForm" label-width="100px">
        <el-col :span="24">
          <el-form-item label="媒体变更信息" label-width="110px"></el-form-item>
        </el-col>
         <el-col :span="6">
          <el-form-item label="变更时间">
            <el-date-picker v-model="changeInfoForm.changeDate" value-format="yyyy-MM-dd" type="date" placeholder="请选择变更时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="变更类型">
            <el-select clearable v-model="changeInfoForm.changeType" placeholder="请选择变更类型">
              <el-option
                v-for="item in changeTypeList"
                :key="item.F_ValueId"
                :label="item.F_Value"
                :value="item.F_ValueId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="说明">
            <el-input v-model="changeInfoForm.changeExplain" placeholder="请输入说明"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button type="info" @click="addChange">添加变更</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-form v-for="(item,index) in addChangeForm" :key="index" label-width="100px">
         <el-col :span="6">
          <el-form-item label="变更时间">
            <el-date-picker disabled v-model="item.F_ChangeTime" type="date" placeholder="请选择变更时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="变更类型">
            <el-select disabled v-model="item.F_ChangeType" placeholder="请选择变更类型">
              <el-option
                v-for="item in changeTypeList"
                :key="item.F_ValueId"
                :label="item.F_Value"
                :value="item.F_ValueId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="说明">
            <el-input disabled v-model="item.F_Describe" placeholder="请输入说明"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item>
            <el-button type="info" @click="removeChange(item.key)">删除变更</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-form ref="renderForm" :model="renderForm" label-width="100px">
        <el-col :span="24">
          <el-form-item label="提醒部门设置" label-width='100px'></el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否提醒">
             <el-radio v-model="renderForm.reminder" label="0">否</el-radio>
             <el-radio v-model="renderForm.reminder" label="1">是</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="提醒部门">
            <el-cascader
              v-model="renderForm.departmentName"
              :options="departmentDatas"
              :props="props"
              placeholder="请选择部门"
              class="form_select"
              clearable
              filterable
              change-on-select
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="提醒时间">
             <el-date-picker v-model="renderForm.ReminderTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择提醒时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-button type="primary" style="margin-left:50%" @click="submit">保存</el-button>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import {getDictionaryValueList,getDepartmentTreeList} from '@/api/commonAPI';
import { getMedia,addMediaInfo,getMediaDeliveryDetail,editMediaInfo,getShopList} from "@/api/mediaCenter/mediaInformation";
import { pickerOptions } from '@/utils'
export default {
 name:'manage',
 props:{
    rowid:{
      type:Number,
      default:0
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      form: {
        launchType: "", //投放类型
        publicationNumber: "", //刊登号码
        number: "", //400号码
        product: [], //绑定产品
        releaseDate: "", //投放日期
        mediaName: "", //媒体名称
        dailyExpenses: "", //日费用
      },
      pickerOptions,//日期数据
      launchTypeList:[],//投放类型
      shopList:[],//商品数据
      changeTypeList:[],//变更类型
      advertisementList:[],//广告名称
      mediaName:[],//媒体名称
      playPlanForm: {
        startDate: "", //计划时间
        BroadcastTime: "", //当天播出时间
        state: '' ,//状态
        stateText: "" ,//状态文字
        broadcost: "" ,//播出时长
        playNumber: "" ,//播放次数
        playInstructions: "" ,//播放说明
        advertisementName: "" ,//广告名称
        advertisementNameId: "" ,//广告名称id
        week: [] ,//选中天数
      },
      renderForm:{
        ReminderTime:'',//提醒时间
        departmentName:[],//提醒部门
        reminder:'0',//是否提醒
      },
      departmentDatas:[],//部门数据
      props: {
        // 自定义部门下拉数据的key值
        value: "id",
        label: "text",
        children:'children'
      },
      //添加变更数据
      changeInfoForm:{
        F_ChangeTime:'',//变更时间
        F_ChangeType:'',//变更类型
        F_Describe:'',//变更说明
        F_Type:1,//变更
      },
      rules:{
        launchType:[{
          required: true,
          message: '请选择投放类型',
          trigger: 'change'
        }],
        mediaName:[{
          required: true,
          message: '请选择媒体名称',
          trigger: 'change'
        }],
      },
      addPlayPlanForm:[],//添加的计划
      addChangeForm:[],//添加的变更
      startPlan:[
        {
          label:'启动',
          id:'0',
        },
        {
          label:'暂停',
          id:'1',
        },
        {
          label:'终止',
          id:'2',
        },
      ]
    };
  },
  created() {
    this.getLaunchType();
    this.getAdvertisement();//获取广告名称
    this.getChangeType();//获取变更类型
    this.getGoods();//获取商品下拉数据
    this.getMediaList();
    this.getDepartment();//获取部门
    if(this.rowid){
      this.getdetail(this.rowid);//获取详情
    }
  },
  methods: {
    handleChange(e){
      console.log(e)
    },
    //保存功能
    submit(){
      if(!this.form.launchType){
        this.$message.error('请选择投放类型')
        return
      }
      if(!this.form.mediaName){
        this.$message.error('请选择媒体名称')
        return
      }
      return new Promise(resolve=>{
        const params={
          F_Id:this.rowid,
          F_Type:this.form.launchType,//投放类型
          F_Name:this.form.mediaName,//媒体名称
          F_Tel:this.form.publicationNumber,//刊登号码
          F_Phone:this.form.number,//400号码
          F_Commodity:this.form.product&&this.form.product.toString(),//绑定产品
          F_LaunchTime:this.form.releaseDate,//投放日期
          F_DailyExpenses:this.form.dailyExpenses-0,//日费用
          F_IsRemind:this.renderForm.reminder-0,//是否提醒
          F_ReminderTime:this.renderForm.ReminderTime,//提醒时间F_DeptId
          F_DeptId:this.renderForm.departmentName?this.renderForm.departmentName.toString():'',//提醒部门
          F_PlayPlanList:this.addPlayPlanForm,//计划数据
          F_MediaChangeList:this.addChangeForm,//变更数据
        }
        if(!this.rowid || this.rowid==0){
            addMediaInfo(params).then(response=>{
            if(response.state.toLowerCase()==='success'){
              this.$parent.$layer.close(this.layerid)
              this.$parent.getList()
              this.$message.success('添加成功')
            }
          })
        }else{
          editMediaInfo(params).then(response=>{
            if(response.state.toLowerCase()=='success'){
              this.$parent.$layer.close(this.layerid)
              this.$parent.getList()
              this.$message.success('编辑成功')
            }
          })
        }
      })
    },
    //添加计划方法
    addPlan() {
      this.addPlayPlanForm.push({
        F_Type:0,
        F_StartTime:this.playPlanForm.startDate&&this.playPlanForm.startDate[0],
        F_EndTime:this.playPlanForm.startDate&&this.playPlanForm.startDate[1],
        startDate:this.playPlanForm.startDate,//播放时间
        F_PlayDate:this.playPlanForm.week&&this.playPlanForm.week.length>0?this.playPlanForm.week.toString():'',//选中天数
        F_PlayDateList:this.playPlanForm.week,//选中天数
        F_BroadcastTime:this.playPlanForm.BroadcastTime,//当天播放时间
        F_State:this.playPlanForm.state,//播放状态
        F_Name:this.playPlanForm.advertisementName,//广告名称
        F_PlayCount:this.playPlanForm.playNumber-0,//播放次数
        F_BroadcastDuration:this.playPlanForm.broadcost-0,//播放时长
        F_Describe:this.playPlanForm.playInstructions,//播放说明
        key: Date.now()
      });
      this.playPlanForm={
        startDate: "", //计划时间
        BroadcastTime: "", //当天播出时间
        state: "" ,//状态
        broadcost: "" ,//播出时长
        playNumber: "" ,//播放次数
        advertisementName: "" ,//广告名称
        advertisementNameId: "" ,//广告名称id
        week: [] ,//选中天数
      }
    },
    //删除计划方法
    removePlan(itemId) {
      var index = this.addPlayPlanForm.findIndex(item=>{
       return item.key == itemId
      })
      if (index !== -1) {
        this.addPlayPlanForm.splice(index, 1)
      }
    },
    //添加变更方法
    addChange() {
      if(this.addChangeForm.length !==1){
          this.addChangeForm.push({
          F_ChangeTime:this.changeInfoForm.changeDate,//变更时间
          F_ChangeType:this.changeInfoForm.changeType,//变更类型
          F_Describe:this.changeInfoForm.changeExplain,//变更说明
          F_Type:1,//变更类型
          key: Date.now()
        });
      }
      this.changeInfoForm={}
    },
    //删除变更方法
    removeChange(itemId) {
      var index = this.addChangeForm.findIndex(item=>{
       return item.key == itemId
      })
      console.log(index)
      if (index !== -1) {
        this.addChangeForm.splice(index, 1)
      }
    },
    //获取投放类型
    getLaunchType(){
      return new Promise(resolve=>{
        const params={
          isleaf:true,
          code:'MTTFLX'
        }
        getDictionaryValueList(params).then(response=>{
          if(response.state.toLowerCase() === 'success'){
            this.launchTypeList = response.data.Rows
          }
        })
      })
    },
    //获取商品下拉数据
    getGoods(){
      return new Promise(resolve=>{
        const params={}
        getShopList(params).then(response=>{
          if(response.state.toLowerCase() === 'success'){
            this.shopList = response.data
          }
        })
      })
    },
    //获取广告名称
    getAdvertisement(){
      return new Promise(resolve=>{
        const params={
          isleaf:true,
          code:'MTGGMC'
        }
        getDictionaryValueList(params).then(response=>{
          if(response.state.toLowerCase() === 'success'){
            this.advertisementList = response.data.Rows
          }
        })
      })
    },
    //获取媒体名称
    getMediaList() {
      return new Promise(resolve => {
        const params = {};
        getMedia(params).then(response => {
          if (response.state.toLowerCase() === "success") {
            this.mediaName = response.rows.Rows;
          }
        });
        resolve();
      });
    },
    //获取变更类型
    getChangeType() {
     return new Promise(resolve=>{
        const params={
          isleaf:true,
          code:'MTBGLX'
        }
        getDictionaryValueList(params).then(response=>{
          if(response.state.toLowerCase() === 'success'){
            this.changeTypeList = response.data.Rows
          }
        })
      })
    },
    //获取详情
    getdetail(id){
      getMediaDeliveryDetail(id).then(response=>{
        if(response.state.toLowerCase()=='success'){
         response.data.F_PlayPlanList= response.data.F_PlayPlanList.map(item=>{
           return {
             F_Id:item.F_Id,
             F_PlayDate:item.F_PlayDate,
             F_PlayDateList:item.F_PlayDate.split(','),
             F_BroadcastTime:item.F_BroadcastTime,
             F_StartTime:item.F_StartTime,
             F_EndTime:item.F_EndTime,
             F_Type:item.F_Type,
             startDate:[item.F_StartTime,item.F_EndTime],
             F_Name:item.F_Name,
             F_BroadcastDuration:item.F_BroadcastDuration,
             F_PlayCount:item.F_PlayCount,
             F_Describe:item.F_Describe,
             F_State:item.F_State.toString(),
           }
          })
          this.form.launchType = response.data.F_Type;//投放类型
          this.form.mediaName = response.data.F_Name;//媒体名称
          this.form.product = response.data.F_Commodity?response.data.F_Commodity.split(','):[];//绑定产品
          this.form.publicationNumber = response.data.F_Tel;//刊登号码
          this.form.number = response.data.F_Phone;//400号码
          this.form.releaseDate = response.data.F_LaunchTime;//投放日期
          this.form.dailyExpenses = response.data.F_DailyExpenses;//日费用
          this.addPlayPlanForm = response.data.F_PlayPlanList;//计划
          this.addChangeForm = response.data.F_MediaChangeList;//变更
          this.renderForm.ReminderTime = response.data.F_ReminderTime;//提醒时间
          this.renderForm.reminder = response.data.F_IsRemind.toString();//是否提醒
          this.renderForm.departmentName =response.data.F_DeptId?response.data.F_DeptId.split(',').map(Number):[];//部门
        }
      })
    },
    //获取部门
    getDepartment(){
      getDepartmentTreeList().then(response=>{
        if(response.state.toLowerCase()=='success'){
          this.departmentDatas=response.data
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
</style>