<template>
   <el-dialog :title="mode=='add'?'新增':'编辑'" :visible.sync="dialogVisible" width="800px" append-to-body :close-on-click-modal="false">
    <!-- <div style="color:#fff">
      <p>类型:{{type}} 增删改类型:{{mode}}</p>
      <p>模板id:{{ tpl }}</p>
    </div> -->
        <div class="dialogStyleBox">
          <div class="dialogLine"></div>
          <div class="dialogCloseButton"></div>
        </div>
        <el-card>
          <BoardTplPreview style="height: 200px; width: 100%;" :boardWH="screenSize" :tpl="dataForm"></BoardTplPreview>
        </el-card>
        <el-card>
          <el-form :model="dataForm" :rules="dataRule" label-width="110px" ref="dataForm" size="mini">
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="所属类别" v-if="type == 'template'">
                  <el-select v-model="dataForm.category" placeholder="请选择所属类别" size="mini">
                    <el-option v-for="item in templateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="infoBoardButton" :span="16">
                <el-form-item label="对齐方式">
                  <el-radio-group v-model="dataForm.formatStyle">
                    <el-radio-button label="0">左对齐</el-radio-button>
                    <el-radio-button label="2">中间对齐</el-radio-button>
                    <el-radio-button label="1">右对齐</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24" style="display: flex; flex-wrap: wrap;width:100%">
              <el-col :span="24">
                <el-form-item label="详细内容" prop="content">
                  <el-input type="textarea" :rows="6" placeholder="详细内容" v-model="dataForm.content"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体颜色">
                  <el-select v-model="dataForm.fontColor" filterable placeholder="请选择">
                    <el-option v-for="item in colorList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体大小">
                  <el-select v-model="dataForm.fontSize" style="width: 100%">
                    <el-option v-for="item in fontSizeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体类型">
                  <el-select v-model="dataForm.fontFamily" placeholder="请选择">
                    <el-option v-for="item in fontTypeList" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="停留时间(秒)">
                  <el-input-number :min="0" v-model="dataForm.stopTime"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入屏方式">
                  <el-select v-model="dataForm.inScreenMode" placeholder="请选择">
                    <el-option v-for="item in inScreenModeList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="屏幕尺寸">
                  <el-select v-model="screenSize" placeholder="请选择" disabled>
                    <el-option v-for="item in screenSizeOptions" :key="item.device_pixel" :label="item.device_pixel" :value="item.device_pixel">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dataFormSubmitHandle" v-loading="loading" style="background-color: #10aac2;color:#fff;">确认</el-button>
          <el-button style="background-color:#b5b5b6;color:#fff" @click="onClose">取消</el-button>
        </div>
      </el-dialog>
</template>
<script>
import { getTemplateList, addTemplate, addTemplateContent, editTemplateContent, editTemplate, deleteTemplate, getTemplateContent, getGalleryList, getFontSizeByDevicePixel, uploadBoardEditInfo } from '@/api/board/template'
import { devicessize } from '@/api/information/api.js'
import { checkIotBoardContent } from '@/api/board/vocabulary'
import BoardPreview from "@screen/components/infoBoard/BoardPreview.vue"
import BoardTplPreview from "@screen/components/infoBoard/BoardTplPreview.vue"
import infoBoardUtils from "@screen/utils/infoBoard.js"
export default {
  data() {
    return {
      alignmentNum: 2,
      content: '',
      boardWidth: '',
      boardHeight: '',
      checkList: [], //复选框一组
      obj: '',
      imgUrl: [],
      imgUrlOther: [],
      dialogVisible: false,
      fileList: [
        {
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      listquery: [], //拖拽图片
      curDragImgItem: '',
      startTxt_x: '000',
      startTxt_y: '000',
      width: '400',
      height: '40',
      // content: "",
      fontSize: '24',
      fontType: 'KaiTi',
      fontSpacing: 0,
      coordinate: '000000',
      url: '',
      previewContent: '', //预览内容
      ispreviewContent: -1,
      dataForm: {
        category:"",
        formatStyle:"",
        content:"",
        fontColor:"",
        fontSize:"",
        fontFamily:"",
        stopTime:"",
        inScreenMode:"",
        screenSize:""
      },
      templateContent: [],
      templateDelContent: [],
      dataRule: {
        content: [
          {
            required: true,
            message: '请输入详细内容',
            trigger: 'blur'
          }
        ]
      },
      fontTypeList: [],
      screenSizeOptions: [],
      colorList: [],
      isCurrencyOptions: [
        {
          code: '0',
          content: '通用'
        },
        {
          code: '1',
          content: '仅为智能推荐模板'
        }
      ],
      inScreenModeList: [],
      imgSize: [
        {
          type: '1024*128',
          name: '全屏'
        },
        {
          type: '',
          name: '正常'
        }
      ],
      fontSizeList: [],
      title: '选择图片',
      loading: false,
      isAdd: false,
      templateCategoryList: [],
      infoType: '',
      devicePixelBoolean: false,
      categoryRules: false,
      tplDefault: {
        "residenceTime": "50",
        "intonation": "0",
        "fontSpacing": "1",
        "screenEntryMethod": "1",
        "screenOutputMethod": "1",
        "lineSpacing": "0",
        "yCoordinate": "0",
        "whetherToSynchronizePlayback": "0",
        "whetherToPlayText": "0",
        "playbackCount": "1",
        "flashingFrequency": "5",
        "backgroundColor": "8",
        "foregroundColor": "FFFF00",
        "textContent": "",
        "fontStyle": "0",
        "displayAreaWidth": "768",
        "playbackDuration": "50",
        "displayAreaHeight": "64",
        "volume": "0",
        "xCoordinate": "0",
        "screenEntrySpeed": "1",
        "horizontalAlignment": "2",
        "playSpecialEffects": "0",
        "setUpTheSpeaker": "0",
        "flickerSpeed": "0",
        "specialEffectsSpeed": "1",
        "fontSize": "64",
        "verticalAlignment": "2",
        "speechSpeed": "0",
        "font": "3"
      }
    }
  },
  props:{
    mode:{    //add edit
      type:String,
      default:""
    },
    type: {   //template board
      type: String,
      default: ""
    },
    visible:{
      type:Boolean,
      default:false
    },
    screenSize:{
      type:String,
      default:""
    },
    tpl:{
      type:Object,
      default:()=>{}
    }
  },
  components:{
    BoardPreview, BoardTplPreview
  },
  computed: {
  },
  watch: {
    visible:{
      handler(newV){
        this.dialogVisible = newV;
      },
      immediate:true
    },
    dialogVisible(newV){
      this.$emit("update:visible", newV);
    },
    tpl:{
      handler(newV){
        // { "id": 3, "category": "0", "content": "保持车距，控制车速", "screenSize": "768*64", "fontColor": "FFFF00", "fontSize": "64", "fontType": "2", "fontSpacing": "0", "rollingSpeed": null, "stopTime": "50", "inScreenMode": "1", "formatStyle": "2", "remark": null, "createTime": "2024-01-06 10:40:19", "updateTime": "2024-01-06 11:04:53" }
        if(newV && Object.keys(newV).length>0){
          this.initData();
        }
      },
      deep:true
    },
    "mode": {
      handler(newV) {
        this.initData();
      }
    }
  },
  mounted() {
  },
  created() {
    this.getDicts('iot_device_font_type').then(res => {
      this.fontTypeList = res.data
      // console.log(this.fontTypeList, "字体类型");
    })
    this.getDicts('iot_devices_font_color').then(res => {
      this.colorList = res.data;
      // console.log(this.colorList, "字体颜色");
    })
    this.getDicts('iot_device_font_inScreen_mode').then(res => {
      this.inScreenModeList = res.data
      // console.log(this.inScreenModeList, "入屏方式");
    })
    this.getDicts('iot_template_category').then(res => {
      this.templateCategoryList = res.data;
    })
    this.getDicts('iot_device_font_size').then(res => {
      this.fontSizeList = res.data;
      // this.dataForm.FONT_SIZE = res.data[1].dictValue
    })
  },
  methods: {
    initData(){
      // getTemplateList({id:this.tpl.id}).then(res=>{
        //    console.log(res.data , "++++++++===========");
        // })
        if(this.mode=="add"){
          let tempTpl= null;
          if(this.type=="template"){
            tempTpl = {
              category: this.templateCategoryList[0].dictValue,
              formatStyle: 0,
              content: "",
              fontColor: this.colorList[0].dictValue,
              fontSize: this.fontSizeList[0].dictValue,
              fontFamily: this.fontTypeList[0].dictValue,
              stopTime: 5,
              inScreenMode: this.inScreenModeList[0].dictValue,
              screenSize: this.screenSize
            }
          }
          else{
            tempTpl = this.tplDefault;
          }
          this.dataForm = infoBoardUtils.dialogSourceFormat(tplDefault, this.type);
        }else{
          this.dataForm = infoBoardUtils.dialogSourceFormat(this.tpl, this.type, this.mode, this.tplDefault);
        }
    },
    onClose(){
        this.dialogVisible = false;
    },
    // 表单提交
    async dataFormSubmitHandle() {
      if (!this.dataForm.content.trim()) {
        return this.$modal.msgError('当前输入内容为空')
      }
      if (this.dataForm.content.indexOf('\\')>=0) {
        return this.$modal.msgError("内容不能含有特殊字符'\\\\'")
      }

      //走接口检验内容是否包含敏感字段
      /*checkIotBoardContent(this.dataForm.CONTENT).then(response => {
        if (response.data == 0) {
          return this.$modal.msgError('当前发布内容包含敏感字段，请修改')
        } else if (response.data == 2) {
          return this.$modal.msgError('当前输入内容为空')
        } else {
          this.loading = true
          // let templateId = "";
          let method = 'put'
          if (this.isAdd) {
            if (this.infoType == 1) {
              // 不走接口 存到待下发信息里
              this.dataForm.STAY = Number(this.dataForm.STAY) * 10
              this.$emit('addInfo', this.dataForm)
            } else {
              // 走接口 存到信息模板里
              const params1 = {
                applyType: '',
                category: this.dataForm.category,
                coordinate: '',
                height: '',
                id: '',
                imageUrl: '',
                imgSizeFrom: '',
                inScreenMode: this.dataForm.ACTION,
                remark: '',
                screenSize: this.dataForm.screenSize,
                stopTime: Number(this.dataForm.STAY) * 10,
                vmsType: '',
                width: ''
              }
              const templateContent = []
              templateContent.push({
                content: this.dataForm.CONTENT,
                coordinate: this.dataForm.COORDINATE,
                fontColor: this.getColorStyle(this.dataForm.COLOR),
                fontSize: this.dataForm.FONT_SIZE.substring(0, 2),
                fontSpacing: this.dataForm.SPEED,
                fontType: this.getFontStyle(this.dataForm.FONT)
              })
              // this.$emit("addInfoMode", this.dataForm);
              addTemplate(params1, method).then(data => {
                console.log(data, '新增口')
                let params2 = {
                  templateContent: templateContent,
                  templateId: data
                }
                addTemplateContent(params2)
                  .then(res => {
                    if (res.code == 200) {
                      this.$emit('getActiveNames')
                      this.$message.success('添加成功')
                    }
                  })
                  .catch(err => {
                    throw err
                  })
              })
            }
          } else {
            // // 修改
            // editTemplate(this.dataForm).then((data) => {});
            // this.templateContent.forEach((e) => {
            //   e.img = e.imageName;
            // });
            // var params = {
            //   templateContent: this.templateContent,
            //   templateId: this.dataForm.id,
            //   templateDelContent: this.templateDelContent,
            // };
            // editTemplateContent(params).then((response) => {
            //   // console.log(response, "返回结果");
            // });
          }
          this.loading = false
          this.dialogVisible = false
          this.isAdd = false
          this.$emit('refreshDataList', this.dataForm)
          var textBoard2 = document.getElementsByClassName('textBoard2')
          textBoard2[0].style.position = 'absolute'
        }
      })*/

      let data = infoBoardUtils.dialogSaveFormat(this.dataForm, this.type, this.mode);

      this.loading = true
      // let templateId = "";

      if(this.type == "template"){
        if(this.mode=='edit'){
          editTemplate(data).then(res=>{
            afterSave("修改");
          });
        }else if (this.mode == "toDevice") {
          this.loading = false

          this.$emit("afterSubmit", { type: this.type, mode: this.mode, data: data });
        } else {
          addTemplate(data).then(res => {
            afterSave("新增");
          });
        }
        
      }else{
        this.loading = false
        // this.dialogVisible = false
        this.$emit("afterSubmit", { type: this.type, mode: this.mode, data:data });
      }
      
      const afterSave = (para)=>{
        this.$message.success(para + '成功!')
        this.loading = false
        // this.dialogVisible = false
        this.$emit("afterSubmit" , {type:this.type, mode:this.mode});
      }

    },
  }
}
</script>
<style lang="scss" scoped>
.infoBoardButton {
  ::v-deep .el-radio-button--medium .el-radio-button__inner {
    // height: 3vh;
    // line-height: 3vh;
    // padding: 0 0.6vw;
    // font-size: 0.7vw;
  }
}
.previewContentCSS {
  border: yellow 1px dashed;
}
/* 页脚 */
.dialog-footer {
  padding-left: 450px;
}
.photoOther img,
.photo img {
  max-width: 300px;
  width: 100%;
  // height: 80px;
}
.infoBoardButton {
  display: flex;
  justify-content: left;
}
.boardTextStyle {
  line-height: 1;
  caret-color: rgba(0, 0, 0, 0);
  user-select: none;
  position: absolute;
  // max-height: 128px;
  overflow: hidden;
}
.blackBoard2 {
  background: #000000;
  display: flex;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  // justify-content: center;
  align-items: center;
}
::v-deep .el-card__body {
  padding: 10px 0;
}

//
::v-deep .el-dialog__header {
  background-color: #145977;
}
::v-deep .el-dialog__body {
  padding: 5px 20px;
  background-color: #145977;
}
::v-deep .el-dialog__footer {
  background-color: #145977;
}
::v-deep .el-card {
  margin-top: 1vh;
  background-color: #145977;
  border: 2px solid #1d7890;
}
::v-deep .el-form-item__label {
  color: #3de8ff;
}
::v-deep .el-input--mini .el-input__inner {
  color: #fff;
  background-color: #096d8c;
}
::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
  color: #fff;
  background-color: #096d8c;
}
::v-deep .el-dialog__title {
  color: #fff;
}
::v-deep .el-textarea__inner {
  color: #fff;
  background-color: #096d8c;
  border-color: #096d8c;
}
::v-deep .el-input-number.is-controls-right .el-input-number__decrease {
  border-color: transparent;
}
::v-deep .el-input-number.is-controls-right .el-input-number__increase {
  border-color: transparent;
  color: #fff;
  background-color: #096d8c;
}
::v-deep .el-button--medium {
  padding: 5px 25px;
  font-size: 14px;
  border-radius: 20px;
  border: transparent;
}
::v-deep .el-radio-button__inner {
  color: #ffffff;
  background-color: pink;
  border-color: #1d58a9;
  -webkit-box-shadow: -1px 0 0 0 #1d58a9;
  box-shadow: -1px 0 0 0 #1d58a9;
  background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
  border-radius: 3px 3px 3px 3px;
  opacity: 1;
  border: none !important;
}
::v-deep .infoBoardButton .el-radio-button--medium .el-radio-button__inner {
  margin: 0 3px;
}
</style>