<script>
import bus from '@/bus'
import PrintDialog from "./printDialog.vue";
import {ipcRenderer} from "electron";


export default {
  components: {PrintDialog},
  props: {
    user: {
      default: {
        avatar: ''
      },
      type: Object
    },
    company: {
      default: {},
      type: Object
    }
  },
  data() {
    return {
      selectGridIndex: 0,
      actionIndex: -1,
      isAutoFinish: false,
      showPrintDialog: false,
      productionNo: '',
      setting: {},
      imgList: [],
      detail: null,
      selectBgColor: '#ececec',
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ],
      grid: [
        // {
        //   label: '7×8',
        //   value: 4,
        //   col: 7,
        //   row: 8
        // },
        // {
        //   label: '10×12',
        //   col: 10,
        //   value: 3,
        //   row: 12
        // },
        // {
        //   label: '14×16',
        //   col: 14,
        //   value: 2,
        //   row: 16
        // },
        {
          label: '16×18',
          value: 1,
          col: 543,
          row: 482
        },
        // {
        //   label: '16×21',
        //   value: 0,
        //   col: 16,
        //   row: 21
        // }
      ]
    }
  },
  computed: {
    avatar() {
      if (this.user && this.user.avatar) {
        console.log(this.user, 9)
        let host = this.company.domain
        if (host.includes('console')) {
          host = host.replace('.jomalls.com', '.joshine.cn')
        }
        let avatar = this.user.avatar.includes('http') ? this.user.avatar : `https://${host}/erpimg/${this.user.avatar}`
        console.log(avatar)
        return avatar
      }
      return ''
    },
    actionList() {
      return this.$store.getters.getActionList
    }
  },
  mounted() {

    this.$nextTick(() => {
      this.$refs.searchRef.focus()
    })

  },
  created() {
    this.setting = JSON.parse(JSON.stringify(this.$store.getters.systemSetting))
  },
  methods: {
    dropdownCommand(v) {
      switch (v) {
        case 'logout':
          this.$confirm('是否退出登录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$dataStore.delete('user')
            this.$router.push('/')
          }).catch(() => {

          });
          break
        case 'company':
          this.$confirm('是否切换系统?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$dataStore.delete('company')
            this.$dataStore.delete('user')
            this.$router.push('/')
          }).catch(() => {

          });
      }
    },
    async setData(data) {
      if (!data) return this.$message.warning('请扫描生产单号')
      await this.$api.post('/completeDelivery', {id: data.id}).then(() => {
      })
      this.$message.success('成功生产完成')
    },
    async sureData() {
      if (!this.detail || Object.keys(this.detail).length <= 1) {
        return this.$message.warning('请扫描生产单号')
      }
      this.$confirm(
          `确定生产完成？`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(async () => {
        await this.setData(this.detail)
      })
    },
    async downloadImage() {
      if (!this.detail || Object.keys(this.detail).length === 0) return this.$message.warning('请扫描生产单号')
      let params = {
        productionNo: this.detail.podProductionNo,
        imgList: this.imgList
      }

      let res = await this.$api.post('/downloadByDesignId', params)
      this.$message.success(res.msg)
    },
    async getDataInfo() {
      if (this.detail && Object.keys(this.detail).length > 0 && this.isAutoFinish) {
        await this.setData(this.detail)
      }
      if (this.productionNo === '') return this.$message.warning('请录入生产单号')
      const findByPodProductionNo = await this.$api.post('/findByPodProductionNo', {
        podProductionNo: this.productionNo,
        status: 'IN_PRODUCTION'
      })
      this.detail = findByPodProductionNo.data
      ipcRenderer.send('win-subScreen', findByPodProductionNo.data)

      let res = await this.$api.post('/getPodProductionInfo', {productionNo: this.productionNo})
      if (res.data.length === 0) return this.$message.warning('未找到素材图！')
      for (let i = 0; i < res.data.length; i++) {
        this.$api.post('/getPngImg', {fileName: res.data[i].fileName}, {
          headers: {
            'responseType': 'blob'
          }
        }).then(r => {

          res.data[i].file = new File([r], res.data[i].fileName, {type: 'image/png'})
          if (i === res.data.length - 1) {
            this.imgList = res.data
            bus.$emit('busEmit', {type: 'sendFile', value: res.data})
          }
        })
      }
      this.productionNo = ''
      this.$refs.searchRef.focus()
    },
    changeActionIndex(t) {
      let index = this.actionIndex
      if (t === '+') {
        if (index === this.$store.state.actionList.length - 1) return;
        this.actionIndex = this.actionIndex + 1
      } else {
        if (index === 0) return
        this.actionIndex = this.actionIndex - 1
      }
      console.log(this.actionIndex, 88)
      bus.$emit('busEmit', {type: 'index', value: this.actionIndex})
      this.$store.commit('changeActionIndex', this.actionIndex)
    },
    setDefaultSetting() {
      this.$store.commit('setDefaultSetting')
      this.setting = JSON.parse(JSON.stringify(this.$store.getters.systemSetting))
      this.$message.success('重置应用程序设置成功')
    },
    settingChange(field, value) {
      this.$store.commit('updateSystemSetting', {field, value});
    },

    setBg() {
      bus.$emit('busEmit', {type: 'bg', value: this.selectBgColor})
    },
    async uploadImage(f) {
      console.log(f, 6666)
      let formData = new FormData()
      formData.append('file', f)
      let {data} = await this.$api.post('/uploadImage', formData, {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      bus.$emit('busEmit', {type: 'uploadImage', value: data})
      return false
    },
    command(i) {
      this.selectGridIndex = i
      this.$store.commit('updateSystemSetting', {field: 'gridValue', value: this.grid[i]})
      bus.$emit('busEmit', {type: 'grid', value: this.grid[i]})
    },

  }
}
</script>
<style scoped>
.page-header {
  background-color: #ececec;
  display: flex;
  justify-content: space-between;
  height: 40px;
  padding: 5px;
}

.left-btn {
  display: flex;
}


</style>
<template>
  <div>
    <div class="page-header">
      <div class="left-btn">
        <!--        <el-tooltip content="文件">-->
        <!--          <el-button style="margin-right: 8px" size="small">文件</el-button>-->
        <!--        </el-tooltip>-->

        <el-dropdown trigger="click" @command="command" :hide-on-click="false">
          <el-button style="height: 100%;margin-right: 0px" size="small">{{ grid[selectGridIndex].label }}</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="i" v-for="(it,i) in grid" :key="i">
              {{ it.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--        <el-tooltip content="字体">-->
        <!--          <el-button size="small">-->
        <!--            <img style="width: 13px;height: 13px" src="@/static/icon/ziti.png" alt="">-->
        <!--          </el-button>-->
        <!--        </el-tooltip>-->
        <el-tooltip content="图片">
          <el-upload accept=".png" action="" :show-file-list="false" :before-upload="uploadImage">
            <el-button style="height: 100%;margin:0 8px" size="small">
              <i class="el-icon-picture" style="font-size: 15px;"></i>
            </el-button>
          </el-upload>
        </el-tooltip>
        <!--        <el-tooltip content="撤销">-->
        <!--          <el-button @click="changeActionIndex('+')"-->
        <!--                     :disabled="actionList.length===0 || actionIndex<-1 ||  actionIndex===actionList.length-1 " icon=""-->
        <!--                     size="small">-->
        <!--            <img style="width: 14px;height: 14px" src="@/static/icon/chehuizuo.png" alt="">-->
        <!--          </el-button>-->
        <!--        </el-tooltip>-->
        <!--        <el-tooltip content="恢复">-->
        <!--          <el-button @click="changeActionIndex('-')"-->
        <!--                     :disabled="actionList.length===0   || actionIndex<=-1" icon=""-->
        <!--                     size="small">-->
        <!--            <img style="width: 14px;height: 14px" src="@/static/icon/chehuiyou.png" alt="">-->
        <!--          </el-button>-->
        <!--        </el-tooltip>-->
        <el-tooltip content="背景色">
          <el-color-picker
              style="margin-right: 3px"
              v-model="selectBgColor"
              @change="setBg"
              color-format="hex"
              :predefine="predefineColors">
          </el-color-picker>
        </el-tooltip>

        <el-popover
            width="320"
            :offset="-120"
            trigger="click"
            placement="bottom"

        >
          <div class="setting-form">
            <el-form :model="setting" label-position="left" size="small">
              <el-form-item prop="setting" label="网格显示">
                <el-select @change="(e)=>settingChange('gridShow',e)" clearable v-model="setting.gridShow">
                  <el-option :value="1" label="未缩放的网格"></el-option>
                  <el-option :value="0" label="无"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="gridSpacing" label="网格间隔">
                <el-select @change="(e)=>settingChange('gridSpacing',e)" clearable v-model="setting.gridSpacing">
                  <el-option value="20mm" label="20mm"></el-option>
                  <el-option value="10mm" label="10mm"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="language" label="语言设置">
                <el-select @change="(e)=>settingChange('language',e)" clearable v-model="setting.language">
                  <el-option value="cn" label="中文"></el-option>
                </el-select>
              </el-form-item>
              <!--              <el-form-item label="自动打印模式">-->
              <!--                <el-switch @change="(e)=>settingChange('autoPrint',e)" v-model="setting.autoPrint"></el-switch>-->
              <!--              </el-form-item>-->
            </el-form>
            <!--            <div class="form-block">-->
            <!--              <div @click="setDefaultSetting" class="block-item">重置应用程序设置</div>-->
            <!--            </div>-->
            <!--            <div class="form-block">-->
            <!--              <div class="block-item">隐私政策</div>-->
            <!--              <div class="block-item">版本信息</div>-->
            <!--            </div>-->
          </div>
          <el-tooltip slot="reference" content="设置">
            <el-button style="margin-right: 8px" size="small">
              <img style="width: 15px;height: 15px" src="@/static/icon/shezhi.png" alt="">
            </el-button>
          </el-tooltip>
        </el-popover>
        <!--        <el-tooltip content="打印">-->
        <!--          <el-button @click="showPrintDialog=true" size="small" type="primary">打印</el-button>-->
        <!--        </el-tooltip>-->
        <!--        <el-tooltip content="添加模板">-->
        <!--          <el-button size="small">添加模板</el-button>-->
        <!--        </el-tooltip>-->
      </div>
      <div class="center-input">
        <el-input @keyup.enter.native="getDataInfo" style="width: 40%;" size="medium" placeholder="请扫描生产单号"
                  ref="searchRef" v-model="productionNo"></el-input>
        <el-button @click="getDataInfo" size="medium" style="margin-left: 10px" type="primary">查询</el-button>
        <div class="sure-btn">
          <el-button @click="sureData" size="medium" style="margin-left: 10px;width: 100%;" type="success">生产完成
          </el-button>
          <div class="check">
            <el-checkbox v-model="isAutoFinish">自动完成上一单</el-checkbox>
          </div>
        </div>
        <el-button @click="downloadImage" size="medium" style="margin-left: 15px" type="primary">下载素材
        </el-button>
      </div>
      <div class="right-user">
        <p>{{ company.companyName }}</p>
        <el-avatar :src="avatar"></el-avatar>
        <el-dropdown @command="dropdownCommand">
          <b style="cursor:pointer;">{{ user.employeeName }}</b>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="company">切换系统</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!--    <print-dialog :byPlatenSize="grid[selectGridIndex].value" @close="showPrintDialog=false"-->
    <!--                  :visible="showPrintDialog"></print-dialog>-->
  </div>
</template>

<style scoped>
.right-user {
  display: flex;
  align-items: center;


}

.right-user b {
  margin: 0 10px;
  display: inline-block;
  color: black;
  font-size: 15px;
  font-weight: bold;
}

.right-user p {
  margin: 0 10px;
  font-weight: bold;
  display: inline-block;
  font-size: 15px;
  color: #e6a23c;
}

.setting-form .el-form {
  padding: 10px;
  box-sizing: border-box;
}

.form-block:nth-last-of-type(1) {
  border-bottom: 1px solid #ececec;
}

.form-block {
  padding: 15px 0;
  border-top: 1px solid #ececec;
}

.block-item {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  padding: 10px 10px;

}

.block-item:hover {
  background-color: #ececec;

}

.center-input {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  flex-shrink: 0;
  overflow: hidden;
  padding-left: 100px;

}

.sure-btn {
  width: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sure-btn ::v-deep .el-button span {
  position: relative;
  left: -40px;
}

.check {
  position: absolute;
  right: 10px;
  width: fit-content;
  line-height: 36px;
  height: 100%;
  z-index: 2;
  color: white;
}
</style>