<style>
  .receiptManage .Period-rules {
    display: flex;
    margin-bottom: 24px;
    padding-left: 20px;
  }

  .receiptManage .Period_Spreate {
    flex: 1;
    min-width: 200px;
    margin-right: 32px;
  }

  .receiptManage .Period-rule-title {
    color: #646a73;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
  }

  .receiptManage .Period-info-icon {
    margin-left: 8px;
    color: #8f959e;
    line-height: 1;
    vertical-align: top;
  }

   .process_Btn_List {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
  }

   .processBtn_Cancel {
    width: 90px;
    height: 35px;
    border: 1px solid #A1AAB2;
    color: #000000;
    background-color: #fff;
    text-align: center;
    line-height: 35px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 20px;
  }

   .processBtn_Save {
    width: 90px;
    height: 35px;
    background-color: #2961FE;
    color: #FFF;
    text-align: center;
    line-height: 35px;
    border-radius: 5px;
    cursor: pointer;
  }

  .baseSetForm_Dialog {
    margin: 20px;
  }

  .cycle_Title {
    font-size: 20px;
    font-weight: 500;
    color: #1f2329;
  }

  .Period-alert {
    padding: 9px 16px;
    border-radius: 4px;
    background-color: #f0f4ff;
    line-height: 22px;
    color: #1f2329;
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 12px;
    font-size: 13px;
  }

  .Okr_Length {
    font-weight: 500;
    color: #1f2329;
  }



  .addDutyUpload .ItemImgDiv {
    width: 118px;
    height: 118px;
    position: relative;
    margin: 0 10px 10px 0;
    display: inline-block;
  }

  .addDutyUpload .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    color: #8c939d;
    position: relative;
    overflow: hidden;
  }

  .addDutyMain {
    display: inline-block;
    width: 118px;
    height: 118px;
    font-size: 70px;
    border: 1px dashed #d9d9d9;
    line-height: 120px;
  }
</style>
<template>
  <div class="page-body">
    <div class="receiptManage">
      <div style="text-align:right;">
        <q-btn color="accent" size="sm" class="q-mr-md" @click="geteject" label="修改收据配置" />
      </div>
      <div class="Period-rules">
        <div class="Period_Spreate">
          <div class="Period-rule-title">流程名称</div>
          <div v-if="baseObj.TempleteIds!=-1">
            <span  v-for="(x,y) in baseObj.TempleteList" :key="y">
              {{x}}{{baseObj.TempleteList.length==y+1?'':'、'}}
            </span>
           </div>
          <div v-if="baseObj.TempleteIds==-1">不限</div>
        </div>
        <div class="Period_Spreate">
          <div class="Period-rule-title">
            开启状态
          </div>
          <div>
            {{baseObj.Enable==1?'已开启':'未开启'}}
          </div>
        </div>
      </div>
      <div class="Period-rules">
        <div class="Period_Spreate">
          <div class="Period-rule-title">
            盖章图片
          </div>
          <div >
            <q-img :src="baseObj.Images" spinner-color="white" style="width: 150px;height:150px"  />
          </div>
          
        </div>
        
      </div>

    </div>
    <q-dialog v-model="isShowBaseSet" maximized full-height seamless position="right" @hide="closeProcess">
      <q-card style="margin-top:61px;width:500px" class="no-border-radius classinfo_Dialog">
        <div class="baseSetForm_Dialog">
          <div class="cycle_Title">收据配置</div>
          <div style="margin-top: 10px;">
            <q-select class="col-12 q-pb-lg q-pr-lg" multiple clearable filled stack-label use-input use-chips
              option-value="Id" option-label="Name" v-model="tempManager" 
              :rules="[(val) => !!val || '请选择相关流程']" :options="SingleList" label="相关流程" :dense="false" emit-value
              map-options >
             
            </q-select>
          </div>
          <div class="row wrap addDutyUpload">
            <div class="col-12">
              <div style="display:flex;flex-wrap: wrap;">
                <div v-if="addMsg.Images!=''" >
                  <div class="ItemImgDiv">
                    <q-img :src="addMsg.Images" spinner-color="white" style="width: 100%;height:100%" />
                    <q-btn size="7px" @click="addMsg.Images=''" style="position:absolute;right:-5px;top:-5px;" round
                      color="red" icon="iconfont icon-guanbi1" />
                  </div>
                </div>
                <el-upload class="avatar-uploader addDutyMain" action="" :before-upload="uploadFile"
                  :show-file-list="false">
                  <i class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </div>
          </div>



          <div class="Okr_Length" style="margin:20px 0;display: flex;align-items: center;">
            <div style="color:#1f2329;margin-right: 10px;">开启状态</div>
            <el-switch v-model="addMsg.Enable" :active-value="1" :inactive-value="2"></el-switch>

          </div>

        </div>
        <div class="process_Btn_List">
          <div class="processBtn_Cancel" @click="closeProcess">关闭</div>
          <div class="processBtn_Save" @click="setBaseInfo">确定</div>
        </div>
      </q-card>
      <div class="dialog-out-close" @click="closeProcess"
        style="height:40px !important;border-top-left-radius: 4px !important;border-bottom-left-radius: 4px !important;">
        <q-icon name="iconfont icon-jujue1" size="26px" />
      </div>
    </q-dialog>
  </div>

</template>
<script>
  import {
    getReceiptConfigInfo,
    setReceiptConfigInfo
  } from '../../api/finance/index';
  import {
    UploadSelfFile
  } from "../../api/common/common"; //上传图片
  export default {
    meta: {
      title: "收据设置"
    },
    components: {

    },
    data() {
      return {
        isShowBaseSet: false,
        baseObj: {},
        addMsg: {},
        SingleList: [],//流程下来列表
        tempManager:[],//选中的流程
      }
    },
    mounted() {
      this.getList();
      this.getSingleList()
    },
    methods: {
      //获取收据配置信息
      getList() {
        getReceiptConfigInfo({}).then(res => {
          if (res.Code == 1) {
            this.baseObj = res.Data;
          }
        })
      },
      getSingleList() {
        this.apipost('FinancialFlowTemplate_post_GetSingleList', {}, res => {
          if (res.data.resultCode == 1) {
            this.SingleList = res.data.data;
            // this.SingleList.unshift({
            //   Id: -1,
            //   Name: "不限",
            // });
            // this.SingleList.forEach(x => {
            //   x.disable = false
            // })
          } else { }
        }, err => { })
      },

      //关闭流程设置
      closeProcess() {
        this.isShowBaseSet = false;
      },
      geteject() {
        if(this.baseObj.Id>0){
          this.addMsg = JSON.parse(JSON.stringify(this.baseObj))
          this.tempManager = this.addMsg.TempleteIds && this.addMsg.TempleteIds!=''? this.addMsg.TempleteIds.split(',').map(Number):[]
        }else{
          this.addMsg={
            Id:0,
            Enable:1,
            TempleteIds:'',
            Images:''
          }
        }
      
        // this.getIds()//去掉不限 这里注释掉不处理
        this.isShowBaseSet = true;
      },
      getIds(){
 
        if(this.tempManager && this.tempManager.length>0){
          if(this.tempManager.indexOf(-1)!=-1){
            this.SingleList.forEach(x=>{
              if(x.Id!=-1){
                x.disable = true
              }else{
                x.disable = false
              }
            })
          }else{
            this.SingleList.forEach(x=>{
              if(x.Id==-1){
                x.disable = true
              }else{
                x.disable = false
              }
            })
          }
        }else{
          this.SingleList.forEach(x=>{
              x.disable = false
            })
        }
      },
      uploadFile(files) {
        UploadSelfFile("course", files, res => {
          if (res.Code == 1) {
            this.addMsg.Images=res.FileUrl;
          }
        });
      },
      setBaseInfo() {
          let msg = JSON.parse(JSON.stringify(this.addMsg))
          if(this.tempManager && this.tempManager.length==0){
            this.$q.notify({
                type: 'negative',
                message: `请选择相关流程`,
                position: 'top'
            })
            return
          }
          if(msg.Images==''){
            this.$q.notify({
                type: 'negative',
                message: `请选择上传图章`,
                position: 'top'
            })
            return
          }
          msg.TempleteIds = this.tempManager.join(',')
          setReceiptConfigInfo(msg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '数据保存成功！',
                position: 'top'
              })
              this.getList()
              this.isShowBaseSet = false;
            }
          })
        
      }

    }
  }

</script>