@extends('layouts.base')

@section('content')
@section('title', trans('配置编辑'))
@include('public.admin.box-item')
<style scoped>
  .fixed {
    width: calc(100% - 250px);
    padding: 7px;
    padding-top: 10px;
    position: fixed;
    bottom: 0px;
    z-index: 1999;
    box-sizing: border-box;
    box-shadow: 0px -1px 10px rgb(0 0 0 / 10%);
    margin-left: -14px;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
  }

  .fixed_box {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .addItem {
    width: 100px;
    height: 100px;
    border: 1px dashed rgb(217, 220, 223);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
  }

  .el-icon-plus {
    font-size: 30px;
    margin: -10px 0 10px;
  }

  .el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    padding-bottom: 20px;
    width: 50vw;
    height: 700px;
    overflow-y: auto;
  }

  .el-dialog__title {
    height: 74px;
  }

  .el-dialog__body {
    height: 504px;
    padding: 0 20px;

  }

  .commodity-show .el-dialog__body {
    height: 520px;
  }

  .commodity-show .el-dialog__footer {
    height: 122px;
  }

  .commodity-show .table-list {
    height: 440px;
    overflow-y: auto;
    margin-top: 20px;
  }

  .commodity-show .search-box {
    display: flex;
    height: 40px;
    /* line-height: 40px; */
    align-items: center;
  }

  .commodity-show .search-item {
    width: 120px;
    margin-right: 10px;
  }

  .search-item1 {
    width: 200px;
    margin-right: 10px;
  }

  .selectNo {}

  .select-search {
    display: flex;
    margin: 20px 0;
  }

  .select-search .el-input {
    width: 200px;
    margin-right: 20px;
  }

  .goods-info {
    height: 32px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .good-list {
    margin: 0 0 10px 10px;
    width: 100px;
    position: relative;
  }
    .del-icon {
    width: 20px;
    height: 20px;
    background-color: rgb(221, 226, 238);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: -10px;
    top: -10px;
    border-radius: 50%;
  }
  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    color: #29BA9C;
  }
  [v-cloak]{display: none;}
  .code-list{display: flex;height: 100%;}
  .code-list .el-tree-box{border-right: 1px solid rgba(238,238,238,1);width: 260px;margin-right: 20px;height:100%;overflow-y: auto;}
  .code-list .el-tree-box .el-tree{width: 250px;overflow-x: auto;margin-right: 10px;}
  .is-leaf .el-tree-node_expand-icon  {display:none !important;}
  .dialog-footer{text-align: center;padding-top: 20px;}
  .code-table-box{flex: 1;height: 100%;padding: 0 10px;overflow-y: auto;}
  .category-tree-box{margin-top: 20px;max-height: 440px;overflow-y: auto;}
</style>
<div class="all">
  <div id="app" v-cloak>
    <box-item text="配置开票商品">
      <el-form ref="form" :model="form" label-width="260px">
        <el-form-item label="税收分类编码" :rules="rules('税收分类编码')" prop="code">
          <el-tag v-if="form.code" closable @close="delTag">[[form.code]][[form.name]]</el-tag>
          <el-button @click="clickCode">税收分类编码</el-button>
        </el-form-item>

        <el-form-item label="开票商品" :rules="goods_rules('税收分类编码')" prop="has_many_goods" class="is-required">
          <div style="display:flex;flex-wrap: wrap;">
            <div class="addItem" @click="openCommodity">
              <div>
                <div class="el-icon-plus"></div>
                <div>选择商品</div>
              </div>
            </div>

            <div class="good-list" v-for="(item,i) in form.has_many_goods" :key="i">
              <div class="del-icon" @click="deleteGoogs(i,form.has_many_goods)">X</div>
              <img :src="item.thumb" alt="" srcset="" style="width:100px;height:100px;">
              <div style="line-height:20px;">[[item.title]][["[id:"+item.id+"]"]]</div>
            </div>
          </div>
          <div>
            <el-tag closable v-for="(item,i) in form.has_many_category" @close="delTag('分类',i)" :key="i">[["分类名称："+(item.name||item.category_name)]]</el-tag>
          </div>

        </el-form-item>
        <el-form-item label="免税类型" :rules="rules('免税类型')" prop="tax_type">
          <el-select v-model="form.tax_type" placeholder="请选择"  clearable>
            <el-option v-for="(item,i) in exemptionType" :label="(item>=0?(item+'%'):item)" :value="item" :key="i"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="税率" :rules="rules('税率')" prop="tax_rate">
          <el-select v-model="form.tax_rate" placeholder="请选择" clearable>
            <el-option v-for="(item,i) in taxRate" :key="i" :label="item+'%'" :value="item"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </box-item>
    <div class="fixed">
      <div class="fixed_box">
        <el-button type="primary" @click="Submit('ruleForm')">提交</el-button>
      </div>
    </div>

    <el-dialog title="选择税收分类编码" :visible.sync="codeShow" width="800px" :before-close="isCodeShow">
      <div class="select-search">
        <el-input v-model="code_info" style="width: 200px;margin-right: 20px;" placeholder="请输入税收编码或关键字" @keyup.enter.native="searchNode(code_info)"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchNode(code_info)">搜 索</el-button>
      </div>
      <div class="code-list">
        <div class="el-tree-box">
          <el-tree :props="{label: 'mc',children: 'children'}"  :highlight-current="true" @node-click="clickNode"  ref="tree" node-key="bm" :data="codeListData" :filter-node-method="filterNode"></el-tree>
        </div>
        <div class="code-table-box">
          <el-table :data="codeList" style="width: 100%;" v-loading="codeLoading">
            <el-table-column prop="mc" label="分类简称" align="center"></el-table-column>
            <el-table-column prop="bm" label="税收分类编码" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="60">
              <template slot-scope="scope">
                <el-button @click="choiceCode(scope.row)" type="text" size="small">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>

    <div class="commodity-show">
      <el-dialog :title="type==0?'选择商品':'选择分类'" :visible.sync="commodityShow">
        <div class="search-box">
          <el-select v-model="type" placeholder="请选择" class="search-item" @change="changeType">
            <el-option label="商品" value="0"></el-option>
            <el-option label="分类" value="1"></el-option>
          </el-select>

          <template v-if="type==0">
            <el-input v-model="goods_info" placeholder="请输入商品信息" class="search-item1"></el-input>
            <el-select v-model="isCode" placeholder="是否已关联税收分类编码" class="search-item1" clearable>
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>

          </template>
          <template v-if="type!=0">
            <el-input v-model="categoryValue" placeholder="请输入分类名称" class="search-item1"></el-input>
          </template>
          <el-button type="primary" icon="el-icon-search" @click="searchVal">搜 索</el-button>
        </div>
        <div class="table-list" v-show="type=='0'">
          <el-table :data="goodsList" :row-key="getRowKey" ref="goodsTable">
            <!-- <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column> -->
            <el-table-column label="商品名称" align="left">
              <template slot-scope="scope">
                <div style="display:flex;">
                  <div style="width:50px;height:50px;">
                    <img :src="scope.row.thumb" width="100%" height="100%">
                  </div>
                  <div class="" style="color:#333;font-size:14px;line-height:16px;margin-left:10px;flex:1;">
                    <div class="goods-info">[["[id"+scope.row.id+"]" + scope.row.title]]</div>
                    <div class="goods-price">[["￥"+scope.row.price]]</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="已关联税收分类编码" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.code">[[scope.row.code]]</div>
                <div v-else>
                  [[scope.row.has_one_invoice_goods&&scope.row.has_one_invoice_goods?scope.row.has_one_invoice_goods.code:"暂无"]]
                </div>
              </template>
            </el-table-column>
            <el-table-column width="120">
              <template slot-scope="scope">
                <el-button type="text" @click="handleSelectionChange(scope.row)">[[getChangeGoods(scope.row.id)?"已":""]]选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="category-tree-box" v-show="type!='0'">
          <el-tree :props="categoryProps()" :load="loadCategory" lazy show-checkbox :data="categoryList" @check-change="changeCategoryList" :default-checked-keys="tree_checked" node-key="id"></el-tree>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="goodsPageSize" layout="prev, pager, next, jumper" :total="goodsTotal" style="margin: 10px 0;">
          </el-pagination>
          <!-- <div>
            <el-button @click="commodityShow = false">取 消</el-button>
            <el-button type="primary" @click="commodityShow = false">确 定</el-button>
          </div> -->
        </div>
      </el-dialog>
    </div>
  </div>
</div>
<script>
  let pramsId = "{{ request()-> id }}";
  const vm = new Vue({
    el: "#app",
    delimiters: ['[[', ']]'],
    data() {
      return {
        isCode: "",
        goods_info: "",
        code_info: "",
        isFfirst:true,
        tree_checked:[],//默认选择的分类
        goods_checked:[],//选择商品的id
        categoryValue:"",
        exemptionType: ["出口免税和其他免税优惠政策","不征增值税","普通零税率","0","1","3"],
        taxRate: [0, 1, 3 ],
        categoryList: [],
        isFirst: false,
        isGetCodeData: true,
        codeList: [],
        codeLoading: false,
        currentPage: 1,
        type: "0",
        value: "",
        commodityShow: false,
        goodsList: [],
        goodsTotal: 0,
        goodsPageSize: 0,
        last_page: null,
        selectdata: [],
        codeShow: false,
        tableData: [],
        form: {
          tax_type: "",
          tax_rate: "",
          name: "",
          code: "",
          has_many_goods: [],
          has_many_category: []
        },
        codeListData:[],
      }
    },
    created() {
      if (pramsId) this.editData(null);
    },
    methods: {
      categoryProps(){
        return {label: 'name',children: 'children',isLeaf:(data,node)=>{
            if (data.has_many_children && data.has_many_children.length<=0) {
              return true
            }
          }}
      },
      rules: (msg) => {
          return { required: true,message: '请选择' + msg,trigger: 'blur'}
      },
      goods_rules(){
        let rules = (rule, value, callback)=>{
          if ((value&&value.length>0) || (this.form.has_many_category&&this.form.has_many_category.length>0)) callback()
          else callback(new Error('请选择开票商品'))
        }
        return { validator: rules, trigger: 'blur'}
      },
      clickCode(){
        this.codeShow = true;
        if (this.codeListData.length<=0) {
          this.getCodeListData()
        }
      },
      changeCategoryList(data) {
        let has_many_category = this.form.has_many_category;
        let i = has_many_category.indexOf(data);
        if (i == -1) {
          has_many_category.push(data);
          this.tree_checked.push(data.id);
        }else {
          has_many_category.splice(i, 1);
          this.tree_checked.splice(i,1);
        }
        this.form.has_many_category = has_many_category;
      },
      getCodeListData(node){
        this.codeLoading = true;
        this.$http.post("{!!yzWebFullUrl('plugin.invoice.admin.invoicing-goods.get-code')!!}").then(({data:{result,msg,data}})=>{
          if(result==1){
            this.codeListData = data;
            this.$nextTick(()=>this.$refs.tree.filter(this.code_info))
            this.codeLoading = false;
          }else this.$message.error(msg)
        })
      },
      clickNode(data,node){
        this.filterCode(data.children);
      },
      searchNode(value){
        this.codeLoading = true;
        this.codeList = [];
        this.cahngeNode = false;
        this.$refs.tree.filter(value);
        this.$nextTick(()=>{
          if (this.code_info == "") {
            this.codeLoading = false;
            return
          }
          this.filterCode(this.cahngeNode.children,value);
          this.$refs.tree.setCurrentKey(this.cahngeNode.bm);
          this.codeLoading = false;
        })
      },
      filterNode(value, data, node){
        if (value=="" || this.code_info=="") return data.children.length>0;
        let bool = false,childrenbool = false;
        if ((data.bm.indexOf(value)!== -1) || (data.mc.indexOf(value)!== -1) || (data.spbmjc.indexOf(value)!== -1)) {
          if (data.children.length<=0) {
            this.cahngeNode = node.parent.data || {}
          }else{
            this.cahngeNode = data;
          }
          if(data.children.length>0) bool = true;
          if (!this.cahngeNode) this.cahngeNode = data.children.length<=0?(node.parent.data || {}) : data;
        }

        for (let i = 0; i < data.children.length; i++) {
          const item = data.children[i];
          if((item.bm.indexOf(value)!== -1) || (item.mc.indexOf(value)!== -1) || (item.spbmjc.indexOf(value)!== -1)){
            childrenbool = true;
            break;
          }
        }
        return bool || childrenbool;
      },
      filterCode(data = [],value){
        this.codeList = data.filter(item=>{
          if(item.children.length>0){
            list.push(item);
            return false;
          }else return true;
          return item.children.length<=0
        })
      },
      choiceCode({zzssl,bm,mc}) {
        zzssl = zzssl.split("%")[0];
        this.form.tax_rate = zzssl;
        this.exemptionType = ["出口免税和其他免税优惠政策","不征增值税","普通零税率","0","1","3",zzssl+""],
        this.taxRate =  [0, 1, 3 ,zzssl],
        this.form.code = bm;
        this.form.name = mc;
        this.codeShow = false;
      },
      searchVal() {
        this.goodsTotal = 0;
        this.currentPage = 1;
        if(this.type==0) this.getGoodsList(1, this.isCode, this.goods_info);
        else this.getCategoryList(1,this.categoryValue)
      },
      changeType(type) {
        this.goodsTotal = 0;
        this.currentPage = 1;
        if (type == 0) this.getGoodsList(1)
        else this.getCategoryList(1)
      },
      getGoodsList(page = "1", relation, name) {
        let json = {code: this.form.code,page};
        if (relation) json.relation = relation;
        if (name) json.name = name;
        this.$http.post("{!!yzWebFullUrl('plugin.invoice.admin.invoicing-goods.get-goods')!!}", json).then(({data: {result,msg = "",data} }) => {
          if (result == 1 && data) {
            this.tableInfo(data, "goodsList");
            let list = this.form.has_many_goods || [];
          }else this.$message.error(msg);
        })
      },
      tableInfo(data, key) {
        this.last_page = data.last_page;
        this.goodsPageSize = data.per_page;
        this.goodsTotal = data.total;
        if (key) this[key] = data.data;
      },
      openCommodity(i) {
        this.commodityShow = true;
        if(this.type==0) {
          this.getGoodsList(1);
        }
        else this.getCategoryList(1);
      },
      deleteGoogs(i,goods){
        goods.splice(i,1);
      },
      loadCategory(node, resolve) {
        let json = node.data && node.data.id ? {category_id: node.data.id} : {};
        this.$http.post("{!!yzWebFullUrl('plugin.invoice.admin.invoicing-goods.get-category')!!}", json).then(({data: {result,msg = "错误",data}}) => {
          if (result == 1) {
            if (!this.isFirst) {
              this.tableInfo(data);
              this.isFirst = true;
            }
            return resolve(data.data);
          } else {
            this.$message.error(msg)
            return []
          }
        })
      },
      editData(formData) {
        let json = {id: pramsId}
        if (formData) json.data = formData;
        this.$http.post("{!!yzWebFullUrl('plugin.invoice.admin.invoicing-goods.change')!!}", json).then(({data: {result,msg,data}}) => {
          if (result == 1) {
            if (!formData) {
              let category = data.has_many_category;
              let dataForm = {
                tax_rate: data.tax_rate,
                tax_type: data.tax_type,
                code: data.code,
                has_many_goods: data.has_many_goods,
                has_many_category: category,
                name: data.name || ""
              }
              this.tree_checked = [];
              category.forEach(item=>{
                this.tree_checked.push(item.id);
              })
              this.form = dataForm;
            } else {
              this.$message.success("保存成功");
              history.go(-1);
          }
          } else this.$message.error(msg)
        })

      },
      Submit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (pramsId) this.editData(this.form);
            else {
              this.$http.post("{!!yzWebFullUrl('plugin.invoice.admin.invoicing-goods.store')!!}", {data: this.form}).then(({data: {result,msg}}) => {
                if (result==1) {
                  this.$message.success(msg)
                  history.go(-1);
                }else this.$message.error(msg)
              })
            }
          } else {
            this.$message.error("必填项不能为空")
          }
        })
      },
      isCodeShow() {
        this.codeShow = false;
      },
      delTag(name, i) {
        if (name == "分类") {
           this.form.has_many_category.splice(i, 1);
           this.tree_checked.splice(i,1)
        }
        else {
          this.form.code = "";
          this.form.name = "";
        }
      },
      getRowKey(row) {
        return row.id
      },
      getChangeGoods(id){
        let goods = this.form.has_many_goods;
        for (let index = 0; index < goods.length; index++) {
          const item = goods[index];
          if (item.id == id) {
            return {i:index};
          }
        }
        return false;
      },
      handleSelectionChange(row) {
        let bool = this.getChangeGoods(row.id,"该商品已选择");
        if (bool===false) {
          this.form.has_many_goods.push(row)
        }else{
          this.form.has_many_goods.splice(bool.i,1)
        }
      },
      getCategoryList(page,name){
        let json = {page};
        if(name) json.name = name;
        this.$http.post("{!!yzWebFullUrl('plugin.invoice.admin.invoicing-goods.get-category')!!}", json).then(({data: { result, msg, data }}) => {
            if (result == 1) {
              this.tableInfo(data, "categoryList");
            }else this.$message.error(msg)
          })
      },
      handleCurrentChange(page) {
        if (this.type == 0) this.getGoodsList(page)
        else this.getCategoryList(page)
      },
    }
  })
</script>

@endsection('content')