<template>
  <!-- 工件报废录入页面 -->
  <div class="entryWrap" id="entry">
    <div class="expand" id="full" @click="handleFullScreen">
      <Icon type="md-expand" size="50" />
    </div>
    <div class="entryItem">
      <div class="choose">
        <p class="selectTitle">
          1.{{$t(90000016)}}
          <span class="red">*</span>
        </p>
        <div class="row">
          <p
            class="options"
            v-for="(item,index) in passageList"
            @click="change(index)"
            :class="{active:a==index}"
            :key="index"
          >{{item.title}}</p>
        </div>
      </div>
      <div class="choose">
        <p class="selectTitle">
          2.{{$t('1052')}}
          <span class="red">*</span>
        </p>
        <div class="row">
          <p
            class="options"
            v-for="(item,index) in stationList"
            @click="change1(index)"
            :class="{active:b==index}"
            :key="index"
          >{{item.name}}</p>
        </div>
      </div>
    </div>
    <div class="entryItem">
      <div class="choose">
        <p class="selectTitle">
          3.{{$t('100217')}}
          <span class="red">*</span>
        </p>
        <div class="row">
          <div class="row" v-for="(item,index) in productList" :key="index">
            <p
              class="options"
              @click="change2(index)"
              :class="{active:c==index}"
            >{{item.productName}}</p>
            <div class="number row" v-show="c==index">
              <p class="minus" @click="reducePro(index)">-</p>
              <input type="text" class="digit" v-model="proCount" />
              <p class="plus" @click="addPro(index)">+</p>
            </div>
          </div>
        </div>
      </div>
      <div class="choose">
        <p class="selectTitle">4.{{$t(1950603)}}</p>
        <div class="row">
          <div class="row" v-for="(item,index) in materialList" :key="index">
            <p
              class="options"
              @click="change3(index)"
              :class="{active:arr.indexOf(index) > -1}"
            >{{item.name +"【"+item.pn+"】"}}</p>
            <div class="number row">
              <p class="minus" @click="reduce(index)">-</p>
              <input type="text" class="digit" v-model="item.qty" />

              <p class="plus" @click="add(index)">+</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="entryItem">
      <div class="choose">
        <p class="selectTitle">5.{{$t(1014)}}{{$t(930062)}}</p>
        <div class="row">
          <p
            class="options"
            v-for="(item,index) in projectList"
            @click="change4(index)"
            :class="{active:e==index && pmust==true}"
            :key="index"
          >{{item.item}}</p>
        </div>
      </div>
    </div>
    <div class="entryItem">
      <div class="choose">
        <p class="selectTitle">6.{{$t(1014)}}{{$t(930128)}}</p>
        <div class="row">
          <p
            class="options"
            v-for="(item,index) in referType"
            @click="change5(index)"
            :class="{active:f==index && reason_c==true}"
            :key="index"
          >{{item.name}}</p>
        </div>
      </div>
    </div>
    <div class="entryItem">
      <div class="choose">
        <p class="selectTitle">7.{{$t(1014)}}{{$t(930063)}}</p>
        <div class="row">
          <p
            class="options"
            v-for="(item,index) in reasonList"
            @click="change6(index)"
            :class="{active:g==index && reason_d==true}"
            :key="index"
          >{{item.remark}}</p>
        </div>
      </div>
    </div>
    <div class="entryItem">
      <div class="choose">
        <p class="selectTitle">8.{{$t(90000021)}}</p>
        <div class="row">
          <input class="erweima" type="text" v-model="qrcode" @keyup.enter="save()" />
        </div>
      </div>
    </div>
    <div class="entryItem pr">
      <!-- <div class="tip" v-show="tip==true">提示：报废{{successnum}}个工件成功!</div> -->
      <div class="tip" v-html="showMsg"></div>
      <button class="save" @click="save" v-text="$t(900306)">保存</button>
    </div>
  </div>
</template>

<script>
import axios from '@/libs/api.request';
// import func from "../../../../vue-temp/vue-editor-bridge";

export default {
    data () {
        return {
            passageList: ['CH3.3', 'CH3.3fsgfdgd', 'CH3.3', 'CH3.3', 'CH3.3'],
            stationList: [],
            productList: [],
            materialList: [],
            projectList: [],
            referType: [], // 原因类别

            reasonList: [], // reason列表
            remark: '', // 不良原因
            reason_c: false,
            reason_d: false,
            passage: 0, // 通道
            station: 0, // 工位
            product: 0, // 产品
            material: 0, // 物料
            project: 0, // 不良项目
            number: 0, // 返工数量
            qrcode: '', // 二维码
            a: 0,
            b: 0,
            c: 0,
            d: -1,
            e: -1,
            f: -1,
            g: -1,
            tip: false,
            fullscreen: false,
            must: false,
            pmust: false,
            successnum: 1,
            active: 'active',
            arr: [],
            arr2: [],
            arr3: [],
            array: [],
            materialids: [],
            showMsg: '',
            proCount: 1, // 产品数量
            copyList: []
        };
    },
    watch: {
        proCount: function (val) {
            console.log(val);
            let number = 0,
                arr = [];
            for (let i = 0; i < this.copyList.length; i++) {
                number = this.copyList[i].qty * val;
                arr.push(number);
            }
            for (let index = 0; index < this.materialList.length; index++) {
                this.materialList[index].qty = arr[index];
            }
        }
    },
    created () {
        this.init();
        // this.initreason();
        this.loadReferType();
    },
    methods: {
        initreason () {
            var params = {
                cat: 'reject'
            };
            this.axios
                .request({
                    url: '/config/dict/GetDictByCatOrderByLetter',
                    params,
                    method: 'get'
                })
                .then((res) => {
                    this.reasonList = res.data.data;
                    // console.log(res.data.data)
                    // this.passageList = res.data.data
                    // this.change(0)
                    // // console.log(this.passageList);
                    // if (this.passageList.length == 0) {
                    //   this.$Message.error('暂无通道')
                    // }
                });
        },
        init () {
            axios
                .request({
                    url: '/qms/RepairPostionSetting/GetChanel',
                    method: 'get'
                })
                .then((res) => {
                    this.passageList = res.data.data;
                    this.change(0);
                    // console.log(this.passageList);
                    if (this.passageList.length == 0) {
                        this.$Message.error(this.$t(930057));
                    }
                });
        },
        initData () {
            this.station = 0;
            this.product = 0;
            this.material = 0;
            this.project = 0;
            this.number = 0;
            this.must = false;
            this.pmust = false;
            this.tip = false;
        },
        // 选择通道
        change (i) {
            this.a = i;
            this.initData();
            this.passage = this.passageList[i].id;
            // 根据通道选择工位产品
            axios
                .request({
                    url:
            '/config/ProjectLevelSection/GetSectionSelect?parentid=' +
            this.passage +
            '&reverselevel=1',
                    method: 'get'
                })
                .then((res) => {
                    this.stationList = res.data.data;
                    // console.log(this.stationList);
                    if (this.stationList.length > 0) {
                        this.change1(0);
                        this.station = res.data.data[0].id;
                    } else {
                        this.projectList = [];
                    }
                });

            // 获得产品数据
            axios
                .request({
                    url:
            '/qms/InspectStandard/GetOQCItemProduct?sectionId=' + this.passage,
                    method: 'get'
                })
                .then((res) => {
                    this.productList = res.data.data;
                    // console.log(this.productList);
                    if (this.productList.length > 0) {
                        this.product = this.productList[0].productId;
                        this.change2(0);
                    } else {
                        this.projectList = [];
                        this.materialList = [];
                        this.material = 0;
                        this.projectList = 0;
                    }
                });
        },
        // 选择工位
        change1 (i) {
            this.tip = false;
            this.material = 0;
            this.project = 0;
            this.must = false;
            this.pmust = false;
            this.b = i;
            this.c = 0;
            this.materialList = [];
            this.station = this.stationList[i].id;

            if (this.productList.length > 0 && this.stationList.length > 0) {
                axios
                    .request({
                        url:
              '/qms/InspectStandard/GetItems?productid=' +
              this.product +
              '&sectionid=' +
              this.station,
                        method: 'get'
                    })
                    .then((res) => {
                        this.projectList = res.data.data;
                    });
            }
        },
        // 选择产品
        change2 (i) {
            this.tip = false;
            this.project = 0;
            this.arr = [];
            if (this.productList.length > 0) {
                this.product = this.productList[i].productId;
            }
            this.c = i;
            // 根据产品选择物料
            var params = {
                productId: this.product,
                section: this.station
            };
            if (this.productList.length > 0) {
                axios
                    .request({
                        url: '/qms/ManufacturingMaterial/GetMaterialByCell',
                        params,
                        method: 'get'
                    })
                    .then((res) => {
                        if (res.data.ret === 1) {
                            this.materialList = res.data.data;
                            let arr = JSON.stringify(res.data.data);
                            this.copyList = JSON.parse(arr);
                        }
                    });
            }
            // 根据工位+产品选择项目
            if (this.productList.length > 0 && this.stationList.length > 0) {
                axios
                    .request({
                        url:
              '/qms/InspectStandard/GetItems?productid=' +
              this.product +
              '&sectionid=' +
              this.station,
                        method: 'get'
                    })
                    .then((res) => {
                        this.projectList = res.data.data;
                        // console.log(this.projectList);
                        // this.project = this.projectList[0].id;
                    });
            }
        },
        // 选择物料
        change3 (i) {
            this.tip = false;

            let arrIndex = this.arr.indexOf(i);

            if (arrIndex > -1) {
                this.arr.splice(arrIndex, 1);
            } else {
                this.arr.push(i);
                this.must = true;
                this.material = this.materialList[i].id;
            }
        },
        // 选择不良项目
        change4 (i) {
            this.tip = false;
            let arrIndex = this.arr2.indexOf(i);

            if (arrIndex > -1) {
                this.arr2 = [];
                this.pmust = false;
                this.e = -1;
                this.project = 0;
            } else {
                this.e = -1;
                this.project = 0;
                this.arr2.push(i);
                this.pmust = true;
                this.e = i;
                this.project = this.projectList[i].id;
            }
        },
        // 选择原因
        change5 (i) {
            this.tip = false;

            let arrIndex = this.arr3.indexOf(i);
            if (arrIndex > -1) {
                this.arr3 = [];
                this.reason_c = true;
                this.f = -1;
                this.remark = '';
                this.reasonList = [];
            } else {
                this.arr3 = [];
                this.f = -1;
                this.arr3.push(i);
                this.reason_c = true;
                this.f = i;
                this.reasonList = [];
                this.loadRefer(this.referType[i].id);
            }
        },
        reduce (i) {
            this.tip = false;
            let number = this.materialList[i].qty;
            if (number > 1) {
                number--;
                this.materialList[i].qty = number;
            } else {
                number = 1;
                this.materialList[i].qty = number;
            }
        },
        add (i) {
            this.tip = false;
            let number = this.materialList[i].qty;
            number++;
            this.materialList[i].qty = number;
        },
        reducePro (i) {
            this.tip = false;

            if (this.proCount > 1) {
                this.proCount--;
                // this.materialList[i].qty = this.proCount*number
            } else {
                this.proCount = 1;
            }
        },
        addPro (i) {
            this.tip = false;

            this.proCount++;
        },
        save () {
            if (this.passage == 0) {
                // this.$Message.error('请选择通道')
                this.showMsg = this.$t(930026) + this.$t(90000016);
                return false;
            }
            if (this.station == 0) {
                // this.$Message.error('请选择工位')
                this.showMsg = this.$t(930026) + this.$t(1052);
                return false;
            }
            if (this.product == 0) {
                // this.$Message.error(this.$t(100217))
                this.showMsg = this.$t(930026) + this.$t(100217);
                return false;
            }
            var materials = [];
            if (
                this.arr != null &&
        this.arr != undefined &&
        this.arr != [] &&
        this.arr != ''
            ) {
                this.arr.forEach((ele) => {
                    let obj = {};
                    obj.id = this.materialList[ele].id;
                    obj.qty = this.materialList[ele].qty;
                    if (obj.qty > 0) {
                        materials.push(obj);
                    }
                });
            }
            if (materials.length == 0) {
                this.showMsg = this.$t(9000222);
                return false;
            }
            let data = {
                Sn: this.qrcode,
                ProductId: this.product,
                Materail: materials,
                SectionId: this.station,
                PreRoute: 0,
                Route: this.station,
                SnType: 0,
                QID: this.project,
                Remark: this.remark,
                Count: this.proCount
            };
            axios
                .request({
                    url: '/qms/RepairData/AddWaste',
                    data,
                    method: 'post'
                })
                .then((res) => {
                    // console.log(res.data);
                    if (res.data.ret == 1) {
                        this.tip = true;
                        this.arr = [];
                        this.number = 0;
                        this.qrcode = '';
                        this.showMsg = this.$t(930066) + this.$t(930060);
                    }
                    // 成功后显示提示
                });
        },
        // 全屏事件
        handleFullScreen () {
            let element = document.getElementById('entry');
            // 判断是否已经是全屏
            // 如果是全屏，退出
            if (this.fullscreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
                // console.log('已还原！')
            } else {
                // 否则，进入全屏
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
                // console.log('已全屏！')
            }
            // 改变当前全屏状态
            this.fullscreen = !this.fullscreen;
        },
        submitqr () {
            if (this.qrcode == '') {
                this.$Message.error(this.$t(9000436));
            } else {
                axios
                    .request({
                        url: '/qms/RepairData/GetProductRoute?sn=' + this.qrcode,
                        method: 'post'
                    })
                    .then((res) => {
                        if (res.data.ret == 1) {
                            this.save();
                        }
                        // 成功后显示提示
                        this.tip = true;
                    });
            }
        },
        loadReferType () {
            axios
                .request({
                    url: '/qms/ReworkReferenceType/GetItem?type=2',
                    method: 'get'
                })
                .then((res) => {
                    console.log(res.data);
                    if (res.data.ret === 1) {
                        this.referType = res.data.data;
                    } else {
                        console.log(this.$t(res.data.msg));
                    }
                });
        },
        loadRefer (category) {
            // let category = this.referType[i].id;
            axios
                .request({
                    url: '/qms/ReworkReference/GetItem?type=2&referType=' + category,
                    method: 'get'
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.reasonList = res.data.data;
                    } else {
                        console.log(this.$t(res.data.msg));
                    }
                });
        },
        change6 (i) {
            let arrIndex = this.array.indexOf(i);

            if (arrIndex > -1) {
                this.array = [];
                this.reason_d = false;
                this.g = -1;
                this.remark = '';
            } else {
                this.array = [];
                this.g = -1;
                this.array.push(i);
                this.reason_d = true;
                this.g = i;
                this.remark = this.reasonList[i].remark;
                console.log(this.remark);
            }
        }
    }
};
</script>

<style scoped>
* {
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-shrink: 1;
}
.entryWrap {
  position: relative;
  background-color: #f5f7f9;
  overflow-y: auto;
  overflow-x: hidden;
}
.expand {
  position: absolute;
  top: 10px;
  right: 10px;
  /* left: 95%; */
}
.entryItem {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 20px;
  width: 100%;
}
.selectTitle {
  font-size: 18px;
}
.options {
  font-size: 12px;
  padding: 0 12px;
  /* width: 100px; */
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;
  background-color: #f2f2f2;
  margin: 10px 0;
  margin-right: 50px;
  cursor: pointer;
}
.active {
  background-color: #2d8cf0;
  color: #fff;
}
.number {
  margin: 10px 55px 10px 0;
}
.minus {
  width: 55px;
  height: 42px;
  line-height: 42px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  background-color: #b8741a;
  border-radius: 5px;
  cursor: pointer;
}
.plus {
  width: 55px;
  height: 42px;
  line-height: 42px;
  font-size: 20px;
  text-align: center;
  color: #fff;
  background-color: #4b7902;
  border-radius: 5px;
  cursor: pointer;
}
.digit {
  display: block;
  outline: none;
  width: 75px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 20px;
  border: 1px solid #d8d8d8;
  background-color: #f4f7f9;
  margin: 0 5px;
  color: #000;
}
.erweima {
  display: block;
  outline: none;
  width: 582px;
  height: 42px;
  line-height: 42px;
  font-size: 20px;
  color: #000;
  text-align: center;
  border: 1px solid #d8d8d8;
  margin: 10px 0;
  background-color: #f4f7f9;
}

.save {
  display: block;
  width: 95px;
  height: 55px;
  background-color: #2d8cf0;
  color: #fff;
  line-height: 55px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 10px;
  position: absolute;
  /* right: 20px; */
  left: 80%;
  top: 50%;
  transform: translateY(-50%);
}
.pr {
  position: relative;
  height: 80px;
}
.tip {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  /* border: 1px solid #d2d2d2; */
  border-radius: 5px;
  color: red;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.red {
  color: red;
}
</style>
