<template>
<div class="container-fluid">
  <section class="content">
    <div class="header pb-2">
      <div class="header-body">
        <div class="row align-items-center py-4">
          <div class="col-lg-6 col-7">
            <nav
              aria-label="breadcrumb"
              class="d-none d-md-inline-block ml-md-4"
            >
              <ol class="breadcrumb breadcrumb-links">
                <li class="breadcrumb-item">
                  <a href="#"><i class="fas fa-home"></i></a>
                </li>
                <li class="breadcrumb-item">
                  <a href="#">Dashboards</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">
                  ລາຍການສິນຄ້າ
                </li>
              </ol>
            </nav>
          </div>
          <div class="col-lg-6 col-5 text-right"></div>
        </div>
      </div>
    </div>
    <div class="row" v-if="isLoggedIn">
      <div class="col-lg-12">
        <div class="card">


          <div class="card-header border-0">
            <div class="row d-flex justify-content-between px-2">
              <div>
                <h3 class="mb-0">ລາຍການສິນຄ້າ</h3>
              </div>
              <div v-if="$store.getters['getroles'].includes('store_product_add')">

                <a href="javascript:void(0)" v-if="!FromPro" @click="SelectlistPro" class="btn btn-sm btn-warning btn-round btn-icon" ><i class="fas fa-list"></i> ສະແດງລາຍການສິນຄ້າ </a>
                <a href="javascript:void(0)" v-if="FromPro" :class="Check_form" @click="BtnSavePro" class="btn btn-sm btn-success btn-round btn-icon" ><i class="fas fa-save"></i> ບັນທຶກ </a>
                <a href="javascript:void(0)" v-if="FromPro" @click="BtnCancelPro" class="btn btn-sm btn-danger btn-round btn-icon" ><i class="fas fa-trash"></i> ຍົກເລີກ </a>
                <a href="javascript:void(0)" v-if="!FromPro" @click="BtnAddPro" class="btn btn-sm btn-info btn-round btn-icon" ><i class="fas fa-plus"></i> ເພີ່ມໃໝ່ </a>
              </div>
            </div>
            
          </div>
          <div class="form-cat px-4 row" v-if="FromPro">
            <div class="col-md-4">
              <div
                v-if="Product.images.length > 0"
                @click="Del_img"
                style="position: absolute; right: 20px; top: 5px"
                class="
                  icon icon-shape
                  bg-gradient-red
                  text-white
                  rounded-circle
                  shadow
                  cursor-pointer
                "
              >
                <i class="fas fa-trash-alt"></i>
              </div>
              <img :src="image_preview" style="width: 100%" />
              <div class="text-center mt-2">
                <div class="progress-wrapper" v-if="images.shupload">
                  <div class="progress-info">
                    <div class="progress-label">
                      <span>ກຳລັງອັບໂຫຼດ</span>
                    </div>
                    <div class="progress-percentage">
                      <span>{{ images.percenUp }}%</span>
                    </div>
                  </div>
                  <div class="progress">
                    <div
                      class="progress-bar bg-primary"
                      role="progressbar"
                      aria-valuenow="0"
                      aria-valuemin="0"
                      aria-valuemax="100"
                      v-bind:style="{ width: images.percenUp + '%' }"
                    ></div>
                  </div>
                </div>
                <span class="text-red" v-if="images.upmax"
                  >ໄຟລ໌ທີ່ທ່ານອັບໂຫຼດມີຂະໜາດເກີນ 1 Mb</span
                >
              </div>
              <div class="mt-2 box-img">
                <div v-for="img in Product.images" :key="img.index">
                  <img
                    :src="'../images/product/' + img.img"
                    width="80"
                    class="mt-2"
                    @click="select_img(e, img.img)"
                  />
                </div>
                <img
                  :src="img_add"
                  width="80"
                  class="mt-2 cursor-pointer"
                  v-if="Product.images.length < 8"
                  onclick="$('#simg').click()"
                />
                <input
                  type="file"
                  id="simg"
                  name="file"
                  style="display: none"
                  @change="onSelected"
                  accept="image/*"
                />
              </div>
            </div>
            <div class="col-md-8">
             

              <div class="row">
                <div class="form-group col-md-4">
                  <label class="form-control-label" >ປະເພດສິນຄ້າ: <span class="text-red">* </span></label >
                  <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fas fa-th-large"></i
                      ></span>
                    </div>

                    <select class="form-control" v-model="Product.session_id" @change="onchange_ses" >
                      <option value="">= ເລືອກ =</option>
                      <option v-bind:value="ls.id" :key="ls.id" v-for="ls in session" >
                        {{ ls.s_name }}
                      </option>
                    </select>
                  </div>
                </div>
                <div class="form-group col-md-4">
                  <label class="form-control-label" >ໝວດໝູ່: <span class="text-red">* </span></label >
                  <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fas fa-th"></i
                      ></span>
                    </div>
                    <select class="form-control" v-model="Product.category_id" @change="onchange_cat" >
                      <option value="">= ເລືອກ =</option>
                      <option v-bind:value="ls.id" :key="ls.id" v-for="ls in category" >
                        {{ ls.s_name }}
                      </option>
                    </select>
                  </div>
                </div>
                <div class="form-group col-md-4">
                  <label class="form-control-label">ໝວດໝູ່ຍ່ອຍ: </label>
                  <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fas fa-layer-group"></i
                      ></span>
                    </div>
                    <select class="form-control" v-model="Product.sub_category_id" >
                      <option value="">= ເລືອກ =</option>
                      <option v-bind:value="ls.id" :key="ls.id" v-for="ls in sub_category" >
                        {{ ls.s_name }}
                      </option>
                    </select>
                  </div>
                </div>

                <div class="form-group col-md-8">
                  <label class="form-control-label"
                    >ຊື່ສິນຄ້າ: <span class="text-red">* </span></label
                  >
                  <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fas fa-file-signature"></i
                      ></span>
                    </div>
                    <input
                      type="text"
                      class="form-control"
                      v-model="Product.pro_name"
                      ref="pro_name"
                    />
                  </div>
                </div>
                <div class="form-group col-md-4">
                  <label class="form-control-label"
                    >ຍີ່ຫໍ້: <span class="text-red">* </span></label
                  >
                  <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fas fa-briefcase"></i
                      ></span>
                    </div>
                    <select class="form-control" v-model="Product.brand">
                      <option value="">= ເລືອກ =</option>
                      <option
                        v-bind:value="br.id"
                        :key="br.id"
                        v-for="br in Brand"
                      >
                        {{ br.brand_name }}
                      </option>
                    </select>
                  </div>
                </div>

                <div class="form-group col-md-4">
                  <label class="form-control-label"
                    >ປະເພດຫົວໜ່ວຍ ຂອງສິນຄ້າ: <span class="text-red">* </span></label
                  >
                  <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fas fa-briefcase"></i
                      ></span>
                    </div>
                    <select class="form-control" v-model="Product.unit">
                      <option value="">= ເລືອກ =</option>
                      <option v-bind:value="un.id" :key="un.id" v-for="un in Unit" > {{ un.unit_name + " (" + un.unit_to + ":" + un.unit_one + ")" }} </option>
                    </select>
                  </div>
                </div>

                <div class="form-group col-md-4">
                  <label class="form-control-label"
                    >Model: </label
                  >
                  <div class="input-group input-group-merge">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fas fa-microchip"></i
                      ></span>
                    </div>
                    <input
                      type="text"
                      class="form-control"
                      v-model="Product.model"
                    />
                  </div>
                </div>

                <div class="form-group col-md-4">
                  <label class="form-control-label"
                    >ວັນໝົດອາຍຸ: </label
                  >
                  <div class="form-group">
                    <div class="input-group">
                        <flat-pickr v-model="Product.date_expiry" :config="config" class="form-control" placeholder="ເລືອກວັນທີ່" />
                        <!-- <input class="form-control datepicker" v-model="Product.date_expiry" type="text" placeholder="dd/mm/yyyy"> -->
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="ni ni-calendar-grid-58"></i></span>
                        </div>
                    </div>
                </div>
                </div>
                <div class="col-md-12 my-2"><hr></div>
                <div class="col-md-4">
                  <label class="form-control-label"
                    >ລາຄາຊື້: <span class="text-red">* </span></label
                  >

                  <div class="input-group input-group-merge mt-2">
                    <cleave v-model="Product.price_buy"
                      :options="option"
                      class="form-control"
                      />
                    <div class="input-group-append">
                      <span class="input-group-text"> Kip</span>
                    </div>
                  </div>
                </div>
                <div class="col-md-8">
                  <div class="d-flex justify-content-between">
                    <label class="form-control-label"
                      >ຕົວເລືອກສິນຄ້າ: </label
                    >
                    <div>
                      <a
                        href="javascript:void(0)"
                        v-if="FormOPS"
                        :class="check_option_price"
                        @click="SaveOptionSell"
                        class="btn btn-sm btn-success btn-round btn-icon"
                        ><i class="fas fa-save"></i> ບັນທຶກ
                      </a>
                      <a
                        href="javascript:void(0)"
                        v-if="FormOPS"
                        @click="cancelOptionSell"
                        class="btn btn-sm btn-danger btn-round btn-icon"
                        ><i class="fas fa-trash"></i> ຍົກເລີກ
                      </a>
                      <a
                        href="javascript:void(0)"
                        v-if="!FormOPS"
                        @click="addOptionSell"
                        class="btn btn-sm btn-info btn-round btn-icon"
                        ><i class="fas fa-plus"></i> ເພີ່ມໃໝ່
                      </a>
                    </div>

                  </div>



                  <div class="row mt-1" v-if="FormOPS">
                    <div class="col-md-8">
                      <div class="input-group input-group-merge mt-2">
                        <div class="input-group-prepend">
                          <span class="input-group-text">ຊື່ຕົວເລືອກ:</span>
                        </div>
                        <input
                          type="text"
                          class="form-control"
                          v-model="FormOP.option_name"
                          ref="focus_op"
                        />

                      </div>

                    </div>
                    <div class="col-md-4">
                      <select class="form-control mt-2" v-model="PriceSellEdit.unit_add">
                        <option value="">= ຫົວໜ່ວຍ =</option>
                        <option v-bind:value="un.id" :key="un.id" v-for="un in Unit" > {{ un.unit_name + " (" + un.unit_to + ":" + un.unit_one + ")" }} </option>
                      </select>
                    </div>



                  </div>

                  <div class="table-responsive py-2" v-if="!FormOPS">

                     <table class="table border align-items-center table-flush mt-2">
                      <thead class="thead-light">
                        <tr>
                          <th width="45">ເລີ່ມຕົ້ນ</th>
                          <th class="text-left">ຊື່ຕົວເລືອກ</th>

                          <th width="30" class="text-center">ຈັດການ</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr
                          v-for="(op, index) in ProductOption"
                          :key="op.index"
                        >
                        <td class="text-center">
                            <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" :id="op.option_id" @click="setDefaultOP(index, op.option_id)" name="chp" :checked="op.option_default == 'true'" class="custom-control-input">
                            <label class="custom-control-label" :for="op.option_id"></label>
                          </div>
                          </td>
                          <td class="text-left">

                              <b>
                              {{op.option_name}}
                              </b>

                          </td>

                          <td>
                            <div class="col-auto">
                              <button
                                type="button"
                                class="btn btn-sm btn-neutral mr-0"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                              >
                                <i class="fas fa-ellipsis-h"></i>
                              </button>
                              <div
                                class="dropdown-menu dropdown-menu-right"
                                style=""
                              >
                                <a class="dropdown-item"  href="javascript:void(0)" @click="edit_option_product(index, op.option_id)" ><i class="fas fa-user-edit text-info"></i >ແກ້ໄຂຂໍ້ມູນ</a >
                                <a class="dropdown-item"  href="javascript:void(0)" @click="del_option_product(index, op.option_id)" ><i class="fas fa-trash text-red"></i >ລຶບຂໍ້ມູນ</a >
                              </div>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>

                  </div>
                </div>

                <div class="col-md-12 my-4 ">
                  <div class="d-flex justify-content-between">
                    <label class="form-control-label"
                      >ຈັດການລາຄາຂາຍ: <span class="text-red">* </span>({{formatPrice(price_barcode)}})</label
                    >
                    <div>
                      <a
                        href="javascript:void(0)"
                        v-if="FormPS"
                        :class="check_add_price"
                        @click="SavePriceSell"
                        class="btn btn-sm btn-success btn-round btn-icon"
                        ><i class="fas fa-save"></i> ບັນທຶກ
                      </a>
                      <a
                        href="javascript:void(0)"
                        v-if="FormPS"
                        @click="cancelPriceSell"
                        class="btn btn-sm btn-danger btn-round btn-icon"
                        ><i class="fas fa-trash"></i> ຍົກເລີກ
                      </a>
                      <a
                        href="javascript:void(0)"
                        v-if="!FormPS"
                        @click="addPriceSell"
                        :class="check_add_bt_price"
                        class="btn btn-sm btn-info btn-round btn-icon"
                        ><i class="fas fa-plus"></i> ເພີ່ມໃໝ່
                      </a>
                    </div>

                  </div>

                    <div v-if="sameUnit" class="alert alert-warning alert-dismissible fade show my-2 p-2" role="alert">
                            <span class="alert-icon"><i class="fas fa-info-circle"></i></span>
                            <span class="alert-text"> ຫົວໜ່ວຍ Unit ບໍ່ໃຫ້ຊ້ຳກັນ!</span>

                        </div>

                  <div class="row mt-4" v-if="FormPS">
                    <div class="col-md-6">
                      <label class="form-control-label mt-2 mb-0" > ປະເພດຫົວໜ່ວຍ ຕໍ່ລາຍຄາ</label>
                      <select class="form-control mt-2" v-model="PriceSellEdit.unit_add">
                        <option value="">= ຫົວໜ່ວຍ =</option>
                        <option v-bind:value="un.id" :key="un.id" v-for="un in Unit" > {{ un.unit_name + " (" + un.unit_to + ":" + un.unit_one + ")" }} </option>
                      </select>
                      <label class="form-control-label mt-2 mb-0" > ລາຄາປົກກະຕິ</label>
                      <div class="input-group input-group-merge mt-2">
                        
                        <cleave v-model="PriceSellEdit.price_add"
                        :options="option"
                        class="form-control"
                        />
                        <div class="input-group-append">
                          <span class="input-group-text"> Kip</span>
                        </div>
                      </div>
                      <label class="form-control-label mt-2 mb-0" > ລາຄາໂປຼໂມຊັ່ນ</label>
                      <div class="input-group input-group-merge mt-2">
                        
                        <cleave v-model="PriceSellEdit.price_add_pro"
                        :options="option"
                        class="form-control"
                        />
                        <div class="input-group-append">
                          <span class="input-group-text"> Kip</span>
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6"> 
                      <label class="form-control-label mt-2 mb-0" > ສ້າງບາໂຄດ</label>
                       <div class="input-group input-group-merge my-2" >
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fas fa-barcode"></i></span>
                    </div>
                    <input type="text" class="form-control" v-model="PriceSellEdit.barcode" ref="pro_name" />

                  </div>
                  <div class="mb-2 d-flex justify-content-center" >
                    <a
                        href="javascript:void(0)"
                        @click="genbarcode_atou"
                        class="btn btn-sm btn-info btn-round btn-icon"
                        ><i class="fas fa-bars"></i> ສ້າງບາໂຄດ ໂອໂຕ
                      </a>

                  </div>
                  <div class="d-flex justify-content-center" >
                  <div  class="card text-center mb-2" style="width:320px height:188px;" >
                  <h5 class="card-title" ><b>ຮ້ານ: ສອນໄອທີຄອມພິວເຕີ້</b> <br> {{Product.pro_name}} <span v-if="ProductOption.length>1">({{getNameOp(ProductOption)}})</span> </h5>
                  <svg class="barcode text-center"

                    :jsbarcode-value="PriceSellEdit.barcode"
                    jsbarcode-textmargin="0"
                    jsbarcode-fontoptions="bold"></svg>
                    <h5 class="card-title mt-0" ><b>ລາຄາ: {{formatPrice(PriceSellEdit.price_add)}} ກີບ </b></h5>
                </div>
                </div>

                    </div>



                  </div>

                  <div class="table-responsive" v-if="!FormPS">
                    <div class="d-flex justify-content-end">
                    <select class="form-control mt-2" v-model="PriceSellEdit.price_type" style="width:150px">
                      <option value="font">ຂາຍໜ້າຮ້ານ</option>
                      <option value="deller">Deller</option>
                      <option value="vip1">VIP 1</option>
                      <option value="vip2">VIP 2</option>
                    </select>
                    </div>
                    <table class="table border align-items-center table-flush mt-2">
                      <thead class="thead-light">
                        <tr>
                          <th width="45">ເລີ່ມຕົ້ນ</th>
                          <th class="text-right">ລາຄາປົກກະຕິ</th>
                          <th class="text-right">ລາຄາໂປຼໂມຊັ່ນ</th>
                          <th width="140" class="text-right">ຫົວໜ່ວຍ</th>

                          <th width="30" class="text-center">ຈັດການ</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr
                          v-for="(pr, index) in list_add_price"
                          :key="pr.index"
                        >
                        <td class="text-center">
                            <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" :id="pr.pbc_id" @click="checkDefaultr(index, pr.pbc_id)" name="ch" :checked="pr.default == 'true'" class="custom-control-input">
                            <label class="custom-control-label" :for="pr.pbc_id"></label>
                          </div>
                          </td>

                          <td class="table-user text-right">
                            <b class="cursor-pointer" @click="setDefaultPro('d', pr.pbc_id)">{{ formatPrice(pr.price) }}</b>
                            <i class="fa-lg fas fa-check-circle text-success ml-1" v-if="pr.default_pro == 'false'"></i>
                          </td>
                            <td class="table-user text-right">
                            <b class="cursor-pointer" @click="setDefaultPro('pro', pr.pbc_id)">{{ formatPrice(pr.price_pro) }}</b>
                            <i class="fa-lg fas fa-check-circle text-success ml-1" v-if="pr.default_pro == 'true'"></i>
                          </td>
                          <td class="text-right">
                            <span v-for="un in Unit" :key="un.id">
                              <b v-if="pr.unit == un.id">
                                {{ un.unit_name }} ({{ un.unit_to }}:{{
                                  un.unit_one
                                }})
                              </b>
                            </span>
                          </td>

                          <td>
                            <div class="col-auto">
                              <button
                                type="button"
                                class="btn btn-sm btn-neutral mr-0"
                                data-toggle="dropdown"
                                aria-haspopup="true"
                                aria-expanded="false"
                              >
                                <i class="fas fa-ellipsis-h"></i>
                              </button>
                              <div
                                class="dropdown-menu dropdown-menu-right"
                                style=""
                              >
                                <a class="dropdown-item"  href="javascript:void(0)" @click="edit_add_price(index, pr.pbc_id)" ><i class="fas fa-user-edit text-info"></i >ແກ້ໄຂຂໍ້ມູນ</a >
                                <a class="dropdown-item"  href="javascript:void(0)" @click="del_add_price(index, pr.pbc_id)" ><i class="fas fa-trash text-red"></i >ລຶບຂໍ້ມູນ</a >
                              </div>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>

                  </div>
                </div>
                <div class="col-md-12">
                  <label class="form-control-label"
                    >ລາຍລະອຽດສິນຄ້າ: <span class="text-red">* </span></label
                  >
                  <QuillEditor
                    theme="snow"
                    style="height: 350px"
                    class="mb-5"
                    v-model:content="Product.detail"
                    contentType="html"
                  />
                </div>
              </div>
            </div>
          </div>
          <div v-if="!FromPro">
            <div class="px-4 pb-2 row">
              <div class="col-md-3">
                <div class="input-group input-group-merge mb-2">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <i class="fas fa-th-large"></i
                    ></span>
                  </div>


                  <select class="form-control" v-model="Fillter.session" @change="onchange_ses_ls" >
                    <option value="">= ເລືອກ =</option>
                    <option v-bind:value="ls.id" :key="ls.id" v-for="ls in session_ls" >
                      {{ ls.s_name }}
                    </option>
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="input-group input-group-merge mb-2">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <i class="fas fa-th"></i>
                    </span>
                  </div>
                  <select class="form-control" v-model="Fillter.category" @change="onchange_cat_ls" >
                    <option value="">= ເລືອກ =</option>
                    <option
                      v-bind:value="ls.id"
                      :key="ls.id"
                      v-for="ls in category_ls"
                    >
                      {{ ls.s_name }}
                    </option>
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="input-group input-group-merge mb-2">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                      <i class="fas fa-layer-group"></i
                    ></span>
                  </div>
                  <select class="form-control" v-model="Fillter.sub_category" @change="onchange_sub_cat_ls" >
                    <option value="">= ເລືອກ =</option>
                    <option
                      v-bind:value="ls.id"
                      :key="ls.id"
                      v-for="ls in sub_category_ls"
                    >
                      {{ ls.s_name }}
                    </option>
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group" style="margin-bottom: 0">
                  <div class="input-group input-group-merge">
                    <div class="input-group input-group-merge">
                      <input
                        class="form-control"
                        type="text"
                        placeholder="ຄົ້ນຫາຂໍ້ມູນ..."
                        v-model="search_pro"
                        v-on:keyup="searchProUP($event)"
                      />
                      
                      <div class="input-group-append">
                        <span class="input-group-text" > 
                          <span v-if="search_pro" @click="clear_search" class="pr-2 text-red cursor-pointer">x</span> <i class="fas fa-search"></i >
                          </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="table-responsive">

              <table class="table align-items-center table-flush">
                <thead class="thead-light">
                  <tr>
                    <!-- <th width="30">ID</th> -->
                    <th class="text-center" width="120">ຮູບສິນຄ້າ</th>
                    <th class="text-left cursor-pointer" width="95" @click="sort('product_id')">ລະຫັດສິນຄ້າ <i class="fas fa-sort"></i></th>
                    <th class="text-left cursor-pointer"  @click="sort('product_name')">ຊື່ສິນຄ້າ <i class="fas fa-sort"></i></th>
                    <th class="text-center" width="120"></th>
                    <th class="text-center cursor-pointer" width="80" @click="sort('in_store')">ຈຳນວນໃນສະຕ໋ອກ <i class="fas fa-sort"></i></th>
                    <th class="text-center cursor-pointer" width="140" @click="sort('product_price_buy')">ລາຄາໜ້າຮ້ານ <i class="fas fa-sort"></i></th>
                    <th width="80" class="text-center" v-if="$store.getters['getroles'].includes('store_product_edit') || $store.getters['getroles'].includes('store_product_remove') || $store.getters['getroles'].includes('store_product_add')">ຈັດການ</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-if="loading_pro">
                    <td colspan="7" class="text-center">
                      <content-loader viewBox="-10 10 450 110" >
                            <rect x="0" y="0" rx="3" ry="3" width="350" height="5" />
                            <rect x="10" y="20" rx="3" ry="3" width="320" height="5" />
                            <rect x="0" y="40" rx="3" ry="3" width="370" height="5" />
                            <rect x="10" y="60" rx="3" ry="3" width="350" height="5" />
                            <rect x="0" y="80" rx="3" ry="3" width="300" height="5" />
                            <rect x="10" y="100" rx="3" ry="3" width="380" height="5" />
                      </content-loader>
                    </td>
                  </tr>
                  <tr v-if="check_data_pro">
                    <td colspan="7" class="text-center">ບໍ່ມີຂໍ້ມູນ</td>
                  </tr>
                  <tr v-for="pro in SortedData" :key="pro.id">
                    <td>
                      <img class=" cursor-pointer" v-if="pro.product_images" @click="imgbox(localtionURL+'/images/product/' + JSON.parse(pro.product_images)[0].img)" :src=" localtionURL+'/images/product/' + JSON.parse(pro.product_images)[0].img " width="120" />
                    </td>
                    <td>{{ pro.product_id }}</td>
                    <td class="table-user-info">
                      <strong>{{ pro.product_name }} </strong><br />
                      <small
                        v-html="
                          textSession(
                            pro.session_id,
                            pro.category_id,
                            pro.sub_category_id
                          )
                        "
                      ></small>
                    </td>
                    <td class="text-center">
                      
                

                      <a
                        href="javascript:void(0)"
                        @click="product_info(pro.product_id)"
                        class="btn btn-sm btn-secondary btn-round btn-icon"
                        > <i class="fas fa-info-circle text-info"></i> ລາຍລະອຽດ
                      </a>
                      
                      </td>
                    <td class="text-center">{{pro.in_store}}</td>
                    <td class="text-right">
                    
                      {{ formatPrice(get_price_sell(pro.product_price_sell)) }}
                    </td>

                    <td v-if="$store.getters['getroles'].includes('store_product_edit') || $store.getters['getroles'].includes('store_product_remove') || $store.getters['getroles'].includes('store_product_add')">
                      <div class="col-auto">
                        <button
                          type="button"
                          class="btn btn-sm btn-neutral mr-0"
                          data-toggle="dropdown"
                          aria-haspopup="true"
                          aria-expanded="false"
                        >
                          <i class="fas fa-ellipsis-h"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right" style="">
                           <!-- <a class="dropdown-item" href="javascript:void(0)" @click="copyAddPro($event, pro.product_id)" ><i class="fas fa-info-circle text-info"></i>ລາຍລະອຽດ</a > -->
                           <a class="dropdown-item" v-if="$store.getters['getroles'].includes('store_product_add')" href="javascript:void(0)" @click="copyAddPro($event, pro.product_id)" ><i class="fas fa-clone text-primary"></i>ກ໊ອບປີ້ ສ້າງໃໝ່</a >
                          <a class="dropdown-item" v-if="$store.getters['getroles'].includes('store_product_edit')" href="javascript:void(0)" @click="editPro($event, pro.product_id)" ><i class="fas fa-user-edit text-info"></i >ແກ້ໄຂຂໍ້ມູນ</a >
                          <a class="dropdown-item" v-if="$store.getters['getroles'].includes('store_product_remove')" href="javascript:void(0)" @click="delPro($event, pro.id)" ><i class="fas fa-trash text-red"></i>ລຶບຂໍ້ມູນ</a >
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <vuePagination
                :pagination="AllProduct"
                @paginate="GetAllProduct()"
                :offset="4"
              ></vuePagination>
            </div>
          </div>
        </div>
      </div>

      <!-- Modal -->
       <div class="modal fade" id="Listbarcode" tabindex="-1" role="dialog" aria-labelledby="addNew" aria-hidden="true" data-keyboard="false" data-backdrop="static" >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">
            <i class="fas fa-info-circle"></i> ລາຍລະອຽດສິນຄ້າ
            </h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>

          <div class="modal-body" >
            <list-loader v-if="loading_info"></list-loader>
            <div class="row" v-if="!loading_info"> 
              <div class="col-md-4 mb-2">
                  <img :src=" '../images/product/' + product_data_pre.images" style="width:100%" />
              </div>

              <div class="col-md-8">
                <b>ຊື່ສິນຄ້າ: </b> {{product_data_pre.product_name}} <br>
                
                <small> <strong> ໝວດໝູ່: </strong>
                {{session_name}} <span v-if="category_name"> <i class="fas fa-angle-double-right text-danger"></i> {{category_name}}</span> <span v-if="sub_category_name"> <i class="fas fa-angle-double-right text-danger"></i> {{sub_category_name}}</span> 
                <br>
                <strong>ຈຳນວນໃນສະຕ໋ອກ:</strong> {{ in_store_num }} {{ in_store_unit }}
                </small>

                <div>
                  <div class="border p-2 my-4 rounded">
                            <span v-for="op in product_data_pre.product_option" :key="op.index">
                            <a href="javascript:void(0)" v-if="op.option_default=='true'" class="btn btn-sm btn-success btn-round btn-icon mr-1" @click="selectOP(op.option_id)" > {{op.option_name}} </a>
                            <a href="javascript:void(0)" v-if="op.option_default=='false'"  class="btn btn-sm btn-secondary btn-round btn-icon mr-1" @click="selectOP(op.option_id)" > {{op.option_name}} </a>
                          </span>
                      </div>



                          <div v-if="checkShfont=='font'">
                          <p class="text-primary" style="font-size:14px"><b><i class="fas fa-home"></i> ລາຄາ ໜ້າຮ້ານ</b></p>
                            <hr class="border-primary">
                            <div class="row mb-2" >

                                <div class="mt-2 text-center" v-for="bar in list_barcode_pr" :key="bar.index">

                                  <div v-if="bar.price_type=='font'" >
                                    <small><b>     ຫົວໜ່ວຍ: <span v-for="un in Unit" :key="un.index" > <span v-if="bar.unit==un.id"> ({{un.unit_to}}:{{un.unit_one}}) </span> </span> </b></small>
                                        <div class="d-flex justify-content-center " >
                                          <div  class="card text-center mb-2" style="width:300px height:188px;" >
                                          <h5 class="card-title" ><b>ຮ້ານ: ສອນໄອທີຄອມພິວເຕີ້</b> <br> {{product_data_pre.product_name}} <span v-if="product_data_pre.product_option.length>1">({{getNameOp(product_data_pre.product_option)}})</span> </h5>
                                          <svg class="barcode text-center"
                                            :jsbarcode-value="bar.barcode"
                                            jsbarcode-textmargin="0"
                                            jsbarcode-fontoptions="bold"></svg>
                                            <h5 class="card-title mt-0" ><b>ລາຄາ: {{formatPrice(bar.price)}} ກີບ </b></h5>
                                        </div>
                                        </div>
                                        <a
                                        href="javascript:void(0)" @click="print_barcode(bar.barcode)"
                                        class="btn btn-sm btn-info btn-round btn-icon"
                                        > <i class="fas fa-barcode"></i> ພິມບາໂຄດ
                                      </a>
                                  </div>
                                </div>
                            </div>
                            </div>

                            <div v-if="checkShdeller=='deller'">
                          <p class="text-success" style="font-size:14px"><b><i class="fas fa-window-restore"></i> ລາຄາ Deller</b></p>
                            <hr class="border-success">
                            <div class="row mb-2" >
                                <div class="mt-2 text-center" v-for="bar in list_barcode_pr" :key="bar.index" >

                                  <div v-if="bar.price_type=='deller'" >
                                     <small><b>    ຫົວໜ່ວຍ: <span v-for="un in Unit" :key="un.index" > <span v-if="bar.unit==un.id"> ({{un.unit_to}}:{{un.unit_one}}) </span> </span></b></small>
                                        <div class="d-flex justify-content-center " >
                                          <div  class="card text-center mb-2" style="width:300px height:188px;" >
                                          <h5 class="card-title" ><b>ຮ້ານ: ສອນໄອທີຄອມພິວເຕີ້</b> <br> {{product_data_pre.product_name}}</h5>
                                          <svg class="barcode text-center"
                                            :jsbarcode-value="bar.barcode"
                                            jsbarcode-textmargin="0"
                                            jsbarcode-fontoptions="bold"></svg>
                                            <h5 class="card-title mt-0" ><b>ລາຄາ: {{formatPrice(bar.price)}} ກີບ </b></h5>
                                        </div>
                                        </div>
                                        <a
                                        href="javascript:void(0)" @click="print_barcode(bar.barcode)"
                                        class="btn btn-sm btn-info btn-round btn-icon"
                                        > <i class="fas fa-barcode"></i> ພິມບາໂຄດ
                                      </a>
                                  </div>
                                </div>
                            </div>
                            </div>

                            <div v-if="checkShvip1=='vip1'">
                          <p class="text-info" style="font-size:14px"><b><i class="fas fa-user-shield"></i> ລາຄາ VIP1</b></p>
                            <hr class="border-info">
                            <div class="row mb-2" >
                                <div class=" mt-2 text-center" v-for="bar in list_barcode_pr" :key="bar.index" >
                            
                                  <div v-if="bar.price_type=='vip1'" >
                                     <small><b>    ຫົວໜ່ວຍ: <span v-for="un in Unit" :key="un.index" > <span v-if="bar.unit==un.id"> ({{un.unit_to}}:{{un.unit_one}}) </span> </span> </b></small>
                                        <div class="d-flex justify-content-center " >
                                          <div  class="card text-center mb-2" style="width:300px height:188px;" >
                                          <h5 class="card-title" ><b>ຮ້ານ: ສອນໄອທີຄອມພິວເຕີ້</b> <br> {{product_data_pre.product_name}}</h5>
                                          <svg class="barcode text-center"
                                            :jsbarcode-value="bar.barcode"
                                            jsbarcode-textmargin="0"
                                            jsbarcode-fontoptions="bold"></svg>
                                            <h5 class="card-title mt-0" ><b>ລາຄາ: {{formatPrice(bar.price)}} ກີບ </b></h5>
                                        </div>
                                        </div>
                                        <a
                                        href="javascript:void(0)"
                                        class="btn btn-sm btn-info btn-round btn-icon"
                                        ><i class="fas fa-print"></i> ພິມບາໂຄດ
                                      </a>
                                  </div>
                                </div>
                            </div>
                            </div>

                            <div v-if="checkShvip2=='vip2'">
                          <p class="text-info" style="font-size:14px"><b><i class="fas fa-user-shield"></i> ລາຄາ VIP2</b></p>
                            <hr class="border-info">
                            <div class="row mb-2" >
                                <div class="col-md-6 mt-2 text-center" v-for="bar in list_barcode_pr" :key="bar.index" >

                                  <div v-if="bar.price_type=='vip2'" >
                                      <small><b>  ຫົວໜ່ວຍ: <span v-for="un in Unit" :key="un.index" > <span v-if="bar.unit==un.id"> ({{un.unit_to}}:{{un.unit_one}}) </span> </span> </b></small>
                                        <div class="d-flex justify-content-center " >
                                          <div  class="card text-center mb-2" style="width:300px height:188px;" >
                                          <h5 class="card-title" ><b>ຮ້ານ: ສອນໄອທີຄອມພິວເຕີ້</b> <br> {{product_data_pre.product_name}}</h5>
                                          <svg class="barcode text-center"
                                            :jsbarcode-value="bar.barcode"
                                            jsbarcode-textmargin="0"
                                            jsbarcode-fontoptions="bold"></svg>
                                            <h5 class="card-title mt-0" ><b>ລາຄາ: {{formatPrice(bar.price)}} ກີບ </b></h5>
                                        </div>
                                        </div>
                                        <a
                                        href="javascript:void(0)" @click="print_barcode(bar.barcode)"
                                        class="btn btn-sm btn-info btn-round btn-icon"
                                        ><i class="fas fa-print"></i> ພິມບາໂຄດ
                                      </a>
                                  </div>
                                </div>
                            </div>
                            </div>
                </div>


              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary text-red" @click="CancelListbarcode" >
              <i class="fas fa-times-circle"></i> ປິດ
            </button>
          </div>
        </div>
      </div>
    </div>


    <div
      class="modal fade"
      id="select_product"
      tabindex="-1"
      role="dialog"
      aria-labelledby="addNew"
      aria-hidden="true"
      data-keyboard="false" data-backdrop="static"
    >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">ເລືອກປະເພດລາຍການ ສິນຄ້າ</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body p-3 text-center">
            <div class=" text-right mb-2">
              <a href="javascript:void(0)" @click="DownloadPDF()" class="btn btn-sm btn-danger btn-round btn-icon" ><i class="fas fa-download"></i> ດາວໂຫຼດ PDF </a>
            </div>
            <vue3-simple-html2pdf
                                ref="vue3SimpleHtml2pdf"
                                :options="pdfOptions"
                                :filename="exportFilename"
                            >
                         <div>
                          <div class="text-center mb-1">
                            <h2>ລາຍການສິນຄ້າ</h2>
                          </div>
                        
          <table class="table border">
            <thead class="thead-light">
              <th>ຮູບສິນຄ້າ</th>
              <th>Model/ລຸ້ນ</th>
              <th>ລາຄາໜ້າຮ້ານ</th>
              <th>ລາຄາ Deller</th>
            </thead>
            <tbody>
              <tr v-if="loading_list_pro">
                    <td colspan="4" class="text-center">
                      <content-loader viewBox="-10 10 450 110" >
                            <rect x="0" y="0" rx="3" ry="3" width="350" height="5" />
                            <rect x="10" y="20" rx="3" ry="3" width="320" height="5" />
                            <rect x="0" y="40" rx="3" ry="3" width="370" height="5" />
                            <rect x="10" y="60" rx="3" ry="3" width="350" height="5" />
                            <rect x="0" y="80" rx="3" ry="3" width="300" height="5" />
                            <rect x="10" y="100" rx="3" ry="3" width="380" height="5" />
                      </content-loader>
                    </td>
                  </tr>
              <tr v-for="pro in data_list_product" :key="pro.id">
                <td><img class=" cursor-pointer" v-if="pro.product_images" @click="imgbox(localtionURL+'/images/product/' + JSON.parse(pro.product_images)[0].img)" :src=" localtionURL+'/images/product/' + JSON.parse(pro.product_images)[0].img " width="120" /></td>
                <td>{{pro.product_name}} <br> {{pro.product_model}}</td>
                <td class=" text-right">{{ formatPrice(get_price_sell(pro.product_price_sell)) }} ກີບ</td>
                <td class=" text-right">{{ formatPrice(get_price_deller(pro.product_price_sell)) }} ກີບ</td>
              </tr>
            </tbody>
          </table>
           </div>
            </vue3-simple-html2pdf>

            
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              ປິດ
            </button>
          </div>
        </div>
      </div>
    </div>
      <!-- end modal -->
    </div>
  </section>
  <vue-easy-lightbox
                            scrollDisabled
                            escDisabled
                            moveDisabled
                            :visible="visible"
                            :imgs="images_show"
                            :index="index"
                            @hide="handleHide"
                          >
                          </vue-easy-lightbox>
</div>
</template>

<script>
//import VueBarcode from '@chenfengyuan/vue-barcode';
import VueBarcode from 'vue-barcode';

export default {
  name: "Store",
  components: {'barcode': VueBarcode},

  directives: {},
  watch: {
     'Product.barCode'(){
          this.polling2 = setInterval(() => {
            JsBarcode(".barcode").options({width: 3,height: 60}).init();
            clearInterval(this.polling2);
          }, 400);
    },
    'PriceSellEdit.barcode'(){
          this.polling2 = setInterval(() => {
            JsBarcode(".barcode").options({width: 3,height: 60}).init();
            clearInterval(this.polling2);
          }, 400);
    },
    '$store.state.store.sessionCat'(){
        this.allSes =  this.$store.getters["getallsession"]
        this.Session = this.$store.getters["getsession"]
      },
    'list_add_price'(){
      if(this.list_add_price!='' && this.list_add_price!=null){
          if(this.list_add_price.length>1){
            this.check_add_bt_price = 'disabled'
          } else { this.check_add_bt_price = '' }
         } else { this.check_add_bt_price = ''  }
    },

  },
  computed: {
    
    price_barcode(){
      if(this.Product.price_sell!=''){
        //if(this.Product.price_sell.filter((e) => e.default == 'true')){
          let price = this.Product.price_sell.filter((e) => e.default == 'true');
         // console.log(price)
        if(price!=''){
          return price[0].price
        } else {
          return '0'
        }
      } else {
          return '0'
      }
    },
    session() {
      if (this.allSes != "") {
        return this.allSes.filter((e) => e.s_cat_id == null);
      } else {
        return "";
      }
    },
    category() {
      if (this.allSes != "") {
        let dat = this.allSes.filter((e) => e.s_cat_id != null);
        let dat2 = dat.filter((e) => e.s_cat_id == this.Product.session_id);
        return dat2.filter((e) => e.s_subcat_id == null);
      } else {
        return "";
      }
    },
    sub_category() {
      if (this.allSes != "") {
        let dat = this.allSes.filter((e) => e.s_cat_id != null);
        let dat2 = dat.filter((e) => e.s_cat_id != null);
        return dat2.filter((e) => e.s_subcat_id == this.Product.category_id);
      } else {
        return "";
      }
    },
    session_ls() {
      if (this.allSes != "") {
        return this.allSes.filter((e) => e.s_cat_id == null);
      } else {
        return "";
      }
    },
    category_ls() {
      if (this.allSes != "") {
        let dat = this.allSes.filter((e) => e.s_cat_id != null);
        let dat2 = dat.filter((e) => e.s_cat_id == this.Fillter.session);
        return dat2.filter((e) => e.s_subcat_id == null);
      } else {
        return "";
      }
    },
    sub_category_ls() {
      if (this.allSes != "") {
        let dat = this.allSes.filter((e) => e.s_cat_id != null);
        let dat2 = dat.filter((e) => e.s_cat_id != null);
        return dat2.filter((e) => e.s_subcat_id == this.Fillter.category);
      } else {
        return "";
      }
    },
    Check_form() {
      if (
        this.Product.session_id == "" ||
        this.Product.category_id == "" ||
        this.Product.pro_name == "" ||
        this.Product.brand == "" ||
        /*this.Product.model == "" ||*/
        this.Product.images == "" ||
        this.Product.price_buy == "" ||
        this.Product.price_sell == "" ||
        this.price_barcode =='0'
      ) {
        return "disabled";
      } else {
        if (this.dable_add) {
          return "disabled";
        } else {
          return "";
        }
      }
    },
    check_data_pro() {
      if (this.AllProduct != "") {
        if (this.AllProduct.data.length < 1) {
          return true;
        } else {
          return false;
        }
      } else {
        return true;
      }
    },
    list_add_price() {
      if (this.Product.price_sell != "") {
        if(this.ProductOption.find((i)=> i.option_default == 'true')){
            let option_id = this.ProductOption.find((i)=> i.option_default == 'true').option_id
            let newP = this.Product.price_sell.filter( (e) => e.option_id == option_id );
            return newP.filter( (e) => e.price_type == this.PriceSellEdit.price_type );
        } else {
          return ''
        }

      } else {
        return "";
      }
    },
    check_add_price() {
      if (this.PriceSellEdit.price_add == "" || this.PriceSellEdit.unit_add == "" || this.PriceSellEdit.barcode == "") {

        return "disabled";
      } else {

         if(this.list_add_price!='' && this.list_add_price!=null){
              if(this.list_add_price.find((i)=> i.unit == this.PriceSellEdit.unit_add)){
                if(this.FormAddPric_type){
                  this.sameUnit = true
                return 'disabled';
                } else {
                  return'';
                }

              } else {
                this.sameUnit = false
                return'';
               }
          } else {
            return "";
          }

      }

    },

    SortedData() {  /// sort
     // console.log(this.AllProduct.data)
     if(this.AllProduct.data!=null){
      return this.AllProduct.data.sort((a,b) => {
        let modifier = 1;
        if(this.currentSortDir === 'desc') modifier = -1;
        if(a[this.currentSort] < b[this.currentSort]) return -1 * modifier;
        if(a[this.currentSort] > b[this.currentSort]) return 1 * modifier;
        return 0;
      })
      }
    },
    check_option_price(){
        if(this.FormOP.option_name=='' || this.FormOP.option_name==null){
          return 'disabled'
        } else { return '' }
    },
    list_barcode_pr(){
      if(this.product_data_pre.product_option){
        let option_id = this.product_data_pre.product_option.find((i)=>i.option_default=='true').option_id
        let barcode = this.product_data_pre.product_barcode
        return barcode.filter((e)=>e.option_id == option_id)
      } else { return '' }
    },
    checkShfont(){
      if(this.product_data_pre.product_option){
        if(this.list_barcode_pr.find((i)=>i.price_type == 'font'))
        {
          return this.list_barcode_pr.find((i)=>i.price_type == 'font').price_type
        } else { return ''}

      } else { return ''}
    },
    checkShdeller(){
      if(this.product_data_pre.product_option){
        if(this.list_barcode_pr.find((i)=>i.price_type == 'deller')){
          return this.list_barcode_pr.find((i)=>i.price_type == 'deller').price_type
        } else { return ''}
      } else { return ''}
    },
    checkShvip1(){
      if(this.product_data_pre.product_option){
        if(this.list_barcode_pr.find((i)=>i.price_type == 'vip1')){
          return this.list_barcode_pr.find((i)=>i.price_type == 'vip1').price_type
        } else { return ''}
      } else { return ''}
    },
    checkShvip2(){
      if(this.product_data_pre.product_option){
        if(this.list_barcode_pr.find((i)=>i.price_type == 'vip2')){
          return this.list_barcode_pr.find((i)=>i.price_type == 'vip2').price_type
        } else { return ''}
      } else { return ''}
    },
  },
  data() {
    return {
      loading_list_pro:false,
      localtionURL: window.location.origin,
      visible: false,
      index:0,
      images_show:'',
      AllProduct: [],
      Product: {
        session_id: "",
        category_id: "",
        sub_category_id: "",
        pro_name: "",
        brand: "",
        model: "",
        detail: "",
        //images:[{img:window.location.origin+'/images/add_img_bt.png'},{img:window.location.origin+'/images/add_img_bt.png'},{img:window.location.origin+'/images/add_img_bt.png'},{img:window.location.origin+'/images/add_img_bt.png'},{img:window.location.origin+'/images/add_img_bt.png'},{img:window.location.origin+'/images/add_img_bt.png'},{img:window.location.origin+'/images/add_img_bt.png'},{img:window.location.origin+'/images/add_img_bt.png'}]
        images: [],
        price_buy: "",
        price_sell: [],
        barCode:'',
        date_expriry:'',
        unit_type:'',
        unit:'',
      },
      PriceSellEdit:{
        pbc_id:'',
        index_update:'',
        barcode:'',
        price_type:'font',
        price_add:'',
        unit_add:'',
        default:'',
        price_add_pro:'',
        default_pro:'',
        sell:null,
      },
   /*   barcode:'',
      price_type: "font",
      price_add: "",
      unit_add: "", */
      loading_pro: false,
      loading_info: true,
      dable_add: false,
      Fillter: {
        session: "",
        category: "",
        sub_category: "",
      },
      FormPS: false,
      FromPro: false,
      FormID: "",
      FormAddPric_type: true, // form add price
      upadte_add_price: "", // form add price
      update_price_index: "", // form add price
      update_price_id: "", // form add price
      image_select: "",
      image_preview: "",
      img_add: window.location.origin + "/images/add_img_bt.png",
      images: {
        file: null,
        max_size: 1000 * 1204,
        upmax: false,
        percenUp: 0,
        shupload: false,
      },
      Session: this.$store.getters["getsession"], //$store.getters["getsession"]
      allSes: this.$store.getters["getallsession"], //$store.getters["getallsession"]
      //Session: [],
      //allSes: [],
      Brand: [],
      Unit: [],
      polling: null,
      polling2: null,
      FormType: true,
      fillter_pro: null,
      search_pro: null,
      isInputActive: false, ///for number
      currentSort:'id',  // sort table
      currentSortDir:'desc',       // sort type
      isLoggedIn: false,
      check_add_bt_price:'',
      sameUnit: false,

      /// prooduc option
      FormOPS:false,
      ProductOption:[],
      FormOP:[{
        option_id:'',
        option_name:'',
        option_default:'',
        }],
      FormOPType:true,
      product_data_pre:[],
      bt_op_pr:'',
      config:{
        wrap: true, // set wrap to true only when using 'input-group'
         altFormat: 'd/m/Y',
        altInput: true,
        dateFormat: 'Y-m-d',
        allowInput: true
      },
      option:{
         // prefix: '$ ',
          numeral: true,
          numeralPositiveOnly: true,
          noImmediatePrefix: true,
          rawValueTrimPrefix: true,
          numeralIntegerScale: 10,
          numeralDecimalScale: 2,
          numeralDecimalMark: '.',
          delimiter: ','
        },
        session_name:'',
        category_name:'',
        sub_category_name:'',
        in_store_num:'',
        in_store_unit:'',
        data_list_product:[],
        pdfOptions:{
            margin: 15,
            image: {
              type: 'jpeg',
              quality: 1,
            },
        html2canvas: { scale: 3 },
            jsPDF: {
              unit: 'mm',
              format: 'a4',
              orientation: 'p',
            },
          },
            exportFilename: 'ລາຄາສິນຄ້າ.pdf',
    };
  },

  mounted() {

  },

  methods: {
    DownloadPDF(){
          this.$refs.vue3SimpleHtml2pdf.download()
        },
    Print_Select_Pro(){
      this.loading_list_pro = true;
      this.$Progress.start();
      //window.open(window.location.origin+`/api/print_product/list_Price?filtter=${this.fillter_pro}`, "_blank");
       this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios.get(`/api/print_product/list_Price?filtter=${this.fillter_pro}`)
            .then((response) => {
              this.loading_list_pro = false;
              this.$Progress.finish();
                this.data_list_product = response.data.data_list_product;
             // console.log(response.data.data_list_product)
              // if (response.data.success) {
              //   this.$notify( { group: "sucess", title: "ສຳເລັດ!", text: response.data.message, }, 2000 );
              // } else {
              //   this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + response.data.message, }, 4000 );
              // }
            }).catch((error) => {
              this.$Progress.fail();
              this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.message, }, 4000 );
            });
        });
    },
    SelectlistPro(){
        $('#select_product').modal('show');
        this.Print_Select_Pro();
    },
    get_price_sell(value){
     
      let data =  JSON.parse(value).product_prices;
      let price_sell = data.find((i)=>i.default=='true');
      //console.log(data)
     return price_sell.price;
     
        // let barcode = this.product_data_pre.product_barcode
        // return barcode.filter((e)=>e.option_id == option_id)

       // {"product_prices":[{"pbc_id":"PBC10601235","option_id":"OP10611914","barcode":"80728631","price_type":"font","price":85000,"price_pro":80000,"unit":"1","default":"true","default_pro":"false","sell":null}],"product_options":[{"option_id":"OP10611914","option_name":"\u0ec0\u0ea5\u0eb5\u0ec8\u0ea1\u0e95\u0ebb\u0ec9\u0e99","option_default":"true"}]}
    },
    get_price_deller(value){
      let data =  JSON.parse(value).product_prices;
      let price_deller = data.find((i)=>i.price_type=='deller')||0;
      return price_deller.price;
    },
    imgbox(img){
       // alert(img);
        this.images_show = img;
        this.show()
    },
    show() {
        this.visible = true
      },
      handleHide() {
        this.visible = false
      },
    getNameOp(productOption){
      let name = productOption.find((i)=>i.option_default == 'true').option_name
      return name
    },
    clear_search(){
        this.search_pro =''
        this.GetAllProduct()
    },

    sort(s) {
     // console.log(s)
      if(s === this.currentSort) {
        this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
      }
      this.currentSort = s;
    },

    genbarcode_by_id(){

      if(this.Product.barCode!=''){
          this.$swal
        .fire({
          title: "ບາໂຄດໄດ້ຖຶກສ້າງກ່ອນໜ້ານີ້ແລ້ວ!",
          text: "ທ່ານແນ່ໃຈບໍ່ ທີ່ຈະສ້າງບາໂຄດໃໝ່?",
          icon: "warning",
          showCancelButton: true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "ຍືນຍັງສ້າງໃໝ່!",
          cancelButtonText: "ຍົກເລີກ",
        })
        .then((result) => {
          if (result.isConfirmed) {
            this.Product.barCode = this.FormID
          }
        });
      } else {
        this.Product.barCode = this.FormID
      }

    },
    genbarcode_atou(){
      //this.Product.barCode = Math.ceil(Math.random()*100000000)
      if(this.PriceSellEdit.barcode!=''){
          this.$swal
        .fire({
          title: "ບາໂຄດໄດ້ຖຶກສ້າງກ່ອນໜ້ານີ້ແລ້ວ!",
          text: "ທ່ານແນ່ໃຈບໍ່ ທີ່ຈະສ້າງບາໂຄດໃໝ່?",
          icon: "warning",
          showCancelButton: true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "ຍືນຍັງສ້າງໃໝ່!",
          cancelButtonText: "ຍົກເລີກ",
        })
        .then((result) => {
          if (result.isConfirmed) {
            this.PriceSellEdit.barcode = Math.floor(Math.random() * 100000000)
          }
        });
      } else {
        this.PriceSellEdit.barcode = Math.floor(Math.random() * 100000000)
      }

    },
    textSession(ses, cat, scat) {
      if(this.allSes.length!=0){


        if (ses != "" && cat != "" && scat == null) {
          //let session = this.allSes.filter((e)=>e.id == ses)
          let session = this.allSes.find((i) => i.id == ses);
          let category = this.allSes.find((i) => i.id == cat);
          return (
            session.s_name +
            ' <i class="fas fa-angle-double-right text-danger"></i> ' +
            category.s_name
          );

      } else {
        let session = this.allSes.find((i) => i.id == ses);
        let category = this.allSes.find((i) => i.id == cat);
        let sub_category = this.allSes.find((i) => i.id == scat);
        return (
          session.s_name +
          ' <i class="fas fa-angle-double-right text-danger"></i> ' +
          category.s_name +
          ' <i class="fas fa-angle-double-right text-danger"></i> ' +
          sub_category.s_name
        );
      }
       }
    },
    searchProUP(e) {
      if (!this.search_pro) {
        this.GetAllProduct();
      }
      if (e.which === 13) {
        this.GetAllProduct();
      }
    },
    copyAddPro(e, id){

      this.GetAllBrand();
      this.$Progress.start();
      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
        axios
          .get(`/api/store/product/edit/${id}`)
          .then((response) => {
            if(response.data.message){
            this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + response.data.message, }, 4000 );
            this.$Progress.fail();
            } else {

             // console.log(JSON.parse(response.data.product_data[0].product_images))
             // console.log(response.data.product_barcode)

              this.price_type = "font";
              this.FormType = true;
              this.FromPro = true;
              this.polling2 = setInterval(() => {
              JsBarcode(".barcode").options({width: 3,height: 60}).init();
              clearInterval(this.polling2);
            }, 400);
              this.polling = setInterval(() => {
              this.$refs.pro_name.focus();
              clearInterval(this.polling);
            }, 500);

              this.FormID = id;
              this.Product.session_id = response.data.product_data[0].session_id;
              this.Product.category_id = response.data.product_data[0].category_id;
              this.Product.sub_category_id = response.data.product_data[0].sub_category_id;
              this.Product.brand = response.data.product_data[0].product_brand;
              this.Product.pro_name = response.data.product_data[0].product_name;
              this.Product.detail = response.data.product_data[0].product_detail;
              this.Product.model = response.data.product_data[0].product_model;
              this.Product.price_buy = response.data.product_data[0].product_price_buy;
              this.Product.date_expiry = response.data.product_data[0].product_date_expiry;
              this.ProductOption = response.data.product_option
              this.Product.price_sell = response.data.product_barcode;
              this.Product.unit_type = response.data.product_data[0].product_unit_type;
              this.Product.unit = response.data.product_data[0].product_unit;

              if ( response.data.product_data[0].product_images == null || response.data.product_data[0].product_images == "" ) {
                this.Product.images = [];
              } else {
                this.Product.images = [];
                //this.Product.images = JSON.parse(response.data.product_data[0].product_images);
              }
              this.check_images_pre();
              this.$Progress.finish();
            }
          })
          .catch((error) => {
            this.$Progress.fail();
            this.dable_add = false;
            this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.message, }, 4000 );
          });
      });


    },
    editPro(e, id) {
      this.GetAllBrand();
      this.$Progress.start();
      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
        axios
          .get(`/api/store/product/edit/${id}`)
          .then((response) => {
            if(response.data.message){
            this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + response.data.message, }, 4000 );
            this.$Progress.fail();
            } else {

             // console.log(JSON.parse(response.data.product_data[0].product_images))
             // console.log(response.data.product_barcode)

              this.price_type = "font";
              this.FormType = false;
              this.FromPro = true;
              this.polling2 = setInterval(() => {
              JsBarcode(".barcode").options({width: 3,height: 60}).init();
              clearInterval(this.polling2);
            }, 400);
              this.polling = setInterval(() => {
              this.$refs.pro_name.focus();
              clearInterval(this.polling);
            }, 500);

              this.FormID = id;
              this.Product.session_id = response.data.product_data[0].session_id;
              this.Product.category_id = response.data.product_data[0].category_id;
              this.Product.sub_category_id = response.data.product_data[0].sub_category_id;
              this.Product.brand = response.data.product_data[0].product_brand;
              this.Product.pro_name = response.data.product_data[0].product_name;
              this.Product.detail = response.data.product_data[0].product_detail;
              this.Product.model = response.data.product_data[0].product_model;
              this.Product.price_buy = response.data.product_data[0].product_price_buy;
              this.Product.date_expiry = response.data.product_data[0].product_date_expiry;
              this.ProductOption = response.data.product_option
              this.Product.price_sell = response.data.product_barcode;
              this.Product.unit_type = response.data.product_data[0].product_unit_type;
              this.Product.unit = response.data.product_data[0].product_unit;

              if (
                response.data.product_data[0].product_images == null ||
                response.data.product_data[0].product_images == ""
              ) {
                this.Product.images = [];
              } else {
                this.Product.images = JSON.parse(response.data.product_data[0].product_images);
              }
              this.check_images_pre();
              this.$Progress.finish();
            }
          })
          .catch((error) => {
            this.$Progress.fail();
            this.dable_add = false;
            this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.message, }, 4000 );
          });
      });
    },
    delPro(e, id) {

      this.$swal
        .fire({
          title: "ທ່ານແນ່ໃຈບໍ່?",
          text: "ທີ່ຈະລຶບຂໍ້ມູນນີ້!",
          icon: "warning",
          showCancelButton: true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "ລຶບເລີຍ!",
          cancelButtonText: "ຍົກເລີກ",
        })
        .then((result) => {
          if (result.isConfirmed) {
            this.$Progress.start();
            this.$axios.get("/sanctum/csrf-cookie").then((response) => {
              axios
                .delete(`/api/store/product/delete/${id}`)
                .then((response) => {
                  if (response.data.success) {
                    this.GetAllProduct();
                    this.$Progress.finish();
                    this.$notify(
                      {
                        group: "sucess",
                        title: "ສຳເລັດ!",
                        text: response.data.message,
                      },
                      2000
                    );
                  } else {
                    this.$notify(
                      {
                        group: "error",
                        title: "ບໍ່ສຳເລັດ!",
                        text: "ຜິດຜາດ: " + response.data.message,
                      },
                      4000
                    );
                    this.$Progress.fail();
                  }
                })
                .catch((error) => {
                  this.$notify(
                    {
                      group: "error",
                      title: "ບໍ່ສຳເລັດ!",
                      text: "ຜິດຜາດ: " + error.message,
                    },
                    4000
                  );
                });
            });
          }
        });
    },
    BtnSavePro() {
      //console.log(this.Unit.find((i)=>i.id==this.Product.unit).unit_to)
      this.dable_add = true;
      if (this.FormType) {
        this.$Progress.start();
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios
            .post("/api/store/product/add", {
              product_name: this.Product.pro_name,
              session_id: this.Product.session_id,
              category_id: this.Product.category_id,
              sub_category_id: this.Product.sub_category_id,
              product_brand: this.Product.brand,
              product_model: this.Product.model,
              product_detail: this.Product.detail,
              product_images: this.Product.images,
              product_price_buy: this.Product.price_buy,
              product_price_sell: this.Product.price_sell,
              user_id: window.Laravel.user.id,
              product_option: this.ProductOption,
              product_date_expiry: this.Product.date_expiry,
              product_unit_type: this.Unit.find((i)=>i.id==this.Product.unit).unit_to,
              product_unit: this.Product.unit,
            })
            .then((response) => {
              this.FormType = true;
              this.dable_add = false;
              if (response.data.success) {
                //this.AllProduct = response.data.que
                this.GetAllProduct();
                this.$Progress.finish();
                this.$notify(
                  {
                    group: "sucess",
                    title: "ສຳເລັດ!",
                    text: response.data.message,
                  },
                  2000
                );
                this.FromPro = false;
              } else {
                this.$notify(
                  {
                    group: "error",
                    title: "ບໍ່ສຳເລັດ!",
                    text: "ຜິດຜາດ: " + response.data.message,
                  },
                  4000
                );
                //console.error(error);
                this.$Progress.fail();
              }
            })
            .catch((error) => {
              this.dable_add = false;
              this.$notify(
                {
                  group: "error",
                  title: "ບໍ່ສຳເລັດ!",
                  text: "ຜິດຜາດ: " + error.message,
                },
                4000
              );
              // console.error(error);
            });
        });
      } else {
       // console.log(this.Unit.find((i)=>i.id==this.Product.unit).unit_to)
       console.log(this.Product.unit)
        this.$Progress.start();
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios
            .post(`/api/store/product/update/${this.FormID}`, {
              product_name: this.Product.pro_name,
              session_id: this.Product.session_id,
              category_id: this.Product.category_id,
              sub_category_id: this.Product.sub_category_id,
              product_brand: this.Product.brand,
              product_model: this.Product.model,
              product_detail: this.Product.detail,
              product_images: this.Product.images,
              product_price_buy: this.Product.price_buy,
              product_price_sell: this.Product.price_sell,
              product_option: this.ProductOption,
              product_date_expiry: this.Product.date_expiry,
              product_unit_type: this.Unit.find((i)=>i.id==this.Product.unit).unit_to,
              product_unit: this.Product.unit,
            })
            .then((response) => {
              this.FormType = true;
              this.dable_add = false;
              if (response.data.success) {
                //this.AllProduct = response.data.que
                this.GetAllProduct();
                this.$Progress.finish();
                this.$notify(
                  {
                    group: "sucess",
                    title: "ສຳເລັດ!",
                    text: response.data.message,
                  },
                  2000
                );
                this.FromPro = false;
              } else {
                 this.dable_add = false;
                // this.error = response.data.message;
                this.$notify(
                  {
                    group: "error",
                    title: "ບໍ່ສຳເລັດ!",
                    text: "ຜິດຜາດ: " + response.data.message,
                  },
                  4000
                );
                //console.error(error);
                this.$Progress.fail();
              }
            })
            .catch((error) => {
               this.dable_add = false;
              this.$notify(
                {
                  group: "error",
                  title: "ບໍ່ສຳເລັດ!",
                  text: "ຜິດຜາດ: " + error,
                },
                4000
              );
              //console.error(error);
            });
        });
      }

    },
    BtnAddPro() {
      this.ProductOption=[]
      this.price_type = "font";
      this.FromPro = true;
      this.FormType = true;
      this.Product.session_id = this.Fillter.session;
      this.Product.category_id = this.Fillter.category;
      this.Product.sub_category_id = this.Fillter.sub_category;
      this.Product.brand = "";
      this.Product.pro_name = "";
      this.Product.detail = "";
      this.Product.model = "";
      this.Product.price_buy = "";
      this.Product.price_sell = [];
      this.Product.images = [];
      this.Product.barCode = '';
       //this.dable_add = true;
      this.polling = setInterval(() => {
        this.$refs.pro_name.focus()
        clearInterval(this.polling)
      }, 900);
      this.check_images_pre();
      this.GetAllBrand();

      // add option product
      this.createOption()
    },
    BtnCancelPro() {
      this.FromPro = false;
      this.FormID = "";
    },
    onchange_ses() {
      this.Product.category_id = "";
      this.Product.sub_category_id = "";
    },
    onchange_cat() {
      this.Product.sub_category_id = "";
    },
    onchange_ses_ls() {
      this.Fillter.category = "";
      this.Fillter.sub_category = "";
      this.fillter_pro =
        this.Fillter.session +
        "|" +
        this.Fillter.category +
        "|" +
        this.Fillter.sub_category;
      this.GetAllProduct();
    },
    onchange_cat_ls() {
      this.Fillter.sub_category = "";
      this.fillter_pro =
        this.Fillter.session +
        "|" +
        this.Fillter.category +
        "|" +
        this.Fillter.sub_category;
      this.GetAllProduct();
    },
    onchange_sub_cat_ls() {
      this.fillter_pro =
        this.Fillter.session +
        "|" +
        this.Fillter.category +
        "|" +
        this.Fillter.sub_category;
      this.GetAllProduct();
    },
    check_images_pre() {
      if (this.Product.images.length < 1) {
        this.image_select = this.img_add;
        this.image_preview = window.location.origin + "/images/add_img_bt.png";
      } else {
        this.image_select = this.Product.images[0].img;
        this.image_preview =
          window.location.origin +
          "/images/product/" +
          this.Product.images[0].img;
      }
    },
    Del_img() {
      //console.log(this.image_select)
      this.$swal
        .fire({
          title: "ທ່ານແນ່ໃຈບໍ່?",
          text: "ທີ່ຈະລຶບຮູບນີ້!",
          icon: "warning",
          showCancelButton: true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "ລຶບເລີຍ!",
          cancelButtonText: "ຍົກເລີກ",
        })
        .then((result) => {
          if (result.isConfirmed) {
            this.$Progress.start();
            this.$axios.get("/sanctum/csrf-cookie").then((response) => {
              axios
                .post("/api/img/del_img_product", {
                  image_del: this.image_select,
                })
                .then((response) => {
                  if (response.data.success) {
                    this.$Progress.finish();
                    this.$notify(
                      {
                        group: "sucess",
                        title: "ສຳເລັດ!",
                        text: " ຮູບໄດ້ຖຶກລຶບແລ້ວ! ",
                      },
                      2000
                    );
                    let new_img = this.Product.images.filter(
                      (e) => e.img != this.image_select
                    );
                    this.Product.images = new_img;
                    this.check_images_pre();
                  } else {
                    this.error = response.data.message;
                    console.error(error);
                    this.$Progress.fail();
                  }
                })
                .catch((error) => {
                  this.$notify(
                    {
                      group: "error",
                      title: "ບໍ່ສຳເລັດ!",
                      text: "ຜິດຜາດ: " + error.message,
                    },
                    4000
                  );
                });
            });
          }
        });
    },
    select_img(e, img) {
      this.image_select = img;
      this.image_preview = window.location.origin + "/images/product/" + img;
    },
    onSelected(event) {
      this.images.file = event.target.files[0];
      let reader = new FileReader();
      reader.addEventListener(
        "load",
        function () {
          this.imagePreview = reader.result;
        }.bind(this),
        false
      );
      if (this.images.file) {
        if (/\.(jpe?g|png|gif)$/i.test(this.images.file.name)) {
          // console.log(this.images.file.size+' | '+this.images.max_size)
          if (this.images.file.size > this.images.max_size) {
            this.images.upmax = true;
          } else {
            this.UploadImg();
            this.images.upmax = false;
            reader.readAsDataURL(this.images.file);
          }
        }
      }
    },
    UploadImg() {
      this.images.shupload = true;
      let formData = new FormData();
      formData.append("file", this.images.file);
      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
        axios
          .post("/api/img/upload_img_product", formData, {
            headers: { "Content-Type": "multipart/form-data" },
            onUploadProgress: (progressEvent) => {
              this.images.percenUp = Math.round(
                (progressEvent.loaded / progressEvent.total) * 100
              );
              if (this.images.percenUp == 100) {
                this.images.shupload = false;
                this.images.percenUp = 0;
              }
            },
          })
          .then((response) => {
            this.Product.images.push({ img: response.data.images });
            this.check_images_pre();
          })
          .catch((error) => {
            this.$notify(
              {
                group: "error",
                title: "ບໍ່ສຳເລັດ!",
                text: "ຜິດຜາດ: " + error.message,
              },
              4000
            );
          });
      });
    },
    GetAllSes() {
      this.$Progress.start();
      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
        axios
          .get(`/api/store/setting`)
          .then((response) => {
            this.Session = response.data.que;
            this.allSes = response.data.all_que;
            this.$Progress.finish();
          })
          .catch((error) => {
            this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.message, }, 4000 );
            this.$Progress.fail();
          });
      });
    },
    GetAllBrand() {
      this.$Progress.start();
      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
        axios
          .get(`/api/store/brand?type=all`)
          .then((response) => {
            this.Brand = response.data;
            this.$Progress.finish();
          })
          .catch((error) => {
            this.$notify(
              {
                group: "error",
                title: "ບໍ່ສຳເລັດ!",
                text: "ຜິດຜາດ: " + error.message,
              },
              4000
            );
            console.error(error);
            this.$Progress.fail();
          });
      });
    },
    GetAllProduct(bpage) {
      this.loading_pro = true;
      this.$Progress.start();
      if (typeof bpage == "undefined") {
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios
            .get(
              `/api/store/product?page=${this.AllProduct.current_page}&filtter=${this.fillter_pro}&s=${this.search_pro}`
            )
            .then((response) => {
              this.loading_pro = false;
              //console.log(response.data.all_que)
              if (response.data.data.length < 1) {
                let bp = this.AllProduct.current_page - 1;
                if (bp >= 1) {
                  this.GetAllProduct(bp);
                } else {
                  this.AllProduct = response.data;
                }
              } else {
                this.AllProduct = response.data;
                this.$Progress.finish();
              }
            })
            .catch((error) => {
              this.$notify(
                {
                  group: "error",
                  title: "ບໍ່ສຳເລັດ!",
                  text: "ຜິດຜາດ: " + error.message,
                },
                4000
              );
              this.loading_pro = false;
              this.AllProduct = "";
              console.error(error);
              this.$Progress.fail();
            });
        });
      } else {
        this.$axios.get("/sanctum/csrf-cookie").then((response) => {
          axios
            .get(
              `/api/store/product?page=${bpage}&filtter=${this.fillter_pro}&s=${this.search_pro}`
            )
            .then((response) => {
              this.loading_pro = false;
              this.AllProduct = response.data;
              this.$Progress.finish();
            })
            .catch((error) => {
              this.$notify(
                {
                  group: "error",
                  title: "ບໍ່ສຳເລັດ!",
                  text: "ຜິດຜາດ: " + error.message,
                },
                4000
              );
              this.loading_pro = false;
              this.$Progress.fail();
            });
        });
      }
    },
    GetAllUnit() {
      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
        axios
          .get(`/api/store/unit?all=all`)
          .then((response) => {
            this.LoadingU = false;
            this.Unit = response.data;
            this.$Progress.finish();
          })
          .catch((error) => {
            this.$notify(
              {
                group: "error",
                title: "ບໍ່ສຳເລັດ!",
                text: "ຜິດຜາດ: " + error.message,
              },
              4000
            );
            this.LoadingU = false;
            this.$Progress.fail();
          });
      });
    },
    checkDefaultr(index,id){
        //let option_id = this.ProductOption.find((i)=> i.option_default == 'true').option_id
        //let findex = this.Product.price_sell.findIndex((i) => i.pbc_id == id);

       for (let i = 0; i < this.Product.price_sell.length; i++) {
         if(this.Product.price_sell[i]!=''){
           if(this.Product.price_sell[i].pbc_id==id){
             this.Product.price_sell[i].default = 'true'
           } else {
             this.Product.price_sell[i].default = 'false'
           }
         }
       }

    },
    setDefaultPro(df,id){

      let option_id = this.ProductOption.find((i)=> i.option_default == 'true').option_id
      let findex = this.Product.price_sell.findIndex((i) => i.pbc_id == id);

       for (let i = 0; i < this.Product.price_sell.length; i++) {
         if(this.Product.price_sell[i]!=''){
           if(this.Product.price_sell[i].pbc_id==id){
             var lid = this.Product.price_sell[findex].pbc_id
             var lbarcode = this.Product.price_sell[findex].barcode
             var lprice_type = this.Product.price_sell[findex].price_type
             var lprice = this.Product.price_sell[findex].price
             var lprice_pro = this.Product.price_sell[findex].price_pro
             var lunit = this.Product.price_sell[findex].unit
             var lsell = this.Product.price_sell[findex].sell
             var ldefault = this.Product.price_sell[findex].default
             //var ldefault_pro = this.Product.price_sell[findex].default_pro

              if(df=='d'){
                this.Product.price_sell[findex] = {
                option_id: option_id,
                pbc_id: lid,
                barcode: lbarcode,
                price_type: lprice_type,
                price: lprice,
                price_pro: lprice_pro,
                unit: lunit,
                default:ldefault,
                default_pro:'false',
                sell:lsell
               }
              } else if(df=='pro'){

                this.Product.price_sell[findex] = {
                option_id: option_id,
                pbc_id: lid,
                barcode: lbarcode,
                price_type: lprice_type,
                price: lprice,
                price_pro: lprice_pro,
                unit: lunit,
                default:ldefault,
                default_pro:'true',
                sell:lsell
               }
              }


           }
         }
       }
    },
    addPriceSell() {
      let price_type = this.PriceSellEdit.price_type
      this.PriceSellEdit = {pbc_id:'', index_update:'', barcode:'', price_type:price_type, price_add:'', price_add_pro:'', unit_add:'', default:'',default_pro:''}
      this.FormPS = true;
      this.FormAddPric_type = true;
      this.polling = setInterval(() => {
        // this.$refs.focus_price.focus();
        clearInterval(this.polling);
      }, 500);
    },
    cancelPriceSell() {
      this.FormPS = false;
    },
    SavePriceSell() {
      let option_id = this.ProductOption.find((i)=> i.option_default == 'true').option_id
     /// console.log(product_option_id)
      if (this.FormAddPric_type) {
        if(this.Product.price_sell.length==0){
            this.Product.price_sell.push({
            option_id: option_id,
            pbc_id: 'PBC'+ Math.floor(Math.random() * 100000000),
            barcode:this.PriceSellEdit.barcode,
            price_type: this.PriceSellEdit.price_type,
            price: this.PriceSellEdit.price_add,
            price_pro: this.PriceSellEdit.price_add_pro,
            unit: this.PriceSellEdit.unit_add,
            default: 'true',
            default_pro: 'false',
            sell: null
          });
        } else {
            this.Product.price_sell.push({
            option_id: option_id,
            pbc_id: 'PBC'+ Math.floor(Math.random() * 100000000),
            barcode:this.PriceSellEdit.barcode,
            price_type: this.PriceSellEdit.price_type,
            price: this.PriceSellEdit.price_add,
            price_pro: this.PriceSellEdit.price_add_pro,
            unit: this.PriceSellEdit.unit_add,
            default: 'false',
            default_pro: 'false',
            sell:null
          });
        }

      } else {
        // if(this.update_price_index){
        this.Product.price_sell[this.PriceSellEdit.index_update] = {
          option_id: option_id,
          pbc_id: this.PriceSellEdit.pbc_id,
          barcode: this.PriceSellEdit.barcode,
          price_type: this.PriceSellEdit.price_type,
          price: this.PriceSellEdit.price_add,
          price_pro: this.PriceSellEdit.price_add_pro,
          unit: this.PriceSellEdit.unit_add,
          default: this.PriceSellEdit.default,
          default_pro: this.PriceSellEdit.default_pro,
          sell: this.PriceSellEdit.sell,
        };
        // }
      }
      let price_type = this.PriceSellEdit.price_type
      this.PriceSellEdit = {pbc_id:'', index_update:'', barcode:'', price_type:price_type, price_add:'', unit_add:'', default:''}
      this.FormPS = false;
      this.FormAddPric_type = true
    },
    edit_add_price(index, id) {

      this.polling = setInterval(() => {
        // this.$refs.focus_price.focus();
        clearInterval(this.polling);
      }, 500);
      this.FormAddPric_type = false;
      let findex = this.Product.price_sell.findIndex((i) => i.pbc_id == id);
      let item = this.Product.price_sell.find((i) => i.pbc_id == id)
      this.FormPS = true

      this.PriceSellEdit.pbc_id = id
      this.PriceSellEdit.index_update = findex
      this.PriceSellEdit.barcode = item.barcode
      this.PriceSellEdit.price_type = item.price_type
      this.PriceSellEdit.price_add = item.price
      this.PriceSellEdit.price_add_pro = item.price_pro
      this.PriceSellEdit.unit_add = item.unit
      this.PriceSellEdit.default = item.default
      this.PriceSellEdit.default_pro = item.default_pro
      this.PriceSellEdit.sell = item.sell


    },
    del_add_price(index, id) {
      let findex = this.Product.price_sell.findIndex((i) => i.pbc_id == id);
      //delete this.Product.price_sell[index].id
      this.Product.price_sell.splice(findex, 1);
      ///console.log(this.Product.price_sell)
    },
    formatPrice(value) {
      if(value){
      let val = (value / 1).toFixed(0).replace(".", ",");
      return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      } else { return 0; }
    },
    getRandomInt(max) {
      return Math.floor(Math.random() * max);
    },
    createOption(){
      if(this.ProductOption=="" || this.ProductOption == null){

        let id = 'OP'+ Math.floor(Math.random() * 100000000)
        this.ProductOption = [{ option_id:id, option_name:'ເລີ່ມຕົ້ນ', option_default:'true', }]

      }
    },
    setDefaultOP(index,id){
          let allop = this.ProductOption
          for (let i = 0; i < allop.length; i++) {
            if(allop[i]!=''){
              if(allop[i].option_id == id){
                this.ProductOption[i].option_default = 'true'
              } else {
                this.ProductOption[i].option_default = 'false'
              }
            }

          }
    },
    addOptionSell(){
      this.FormOPS = true
      this.polling = setInterval(() => {
        this.$refs.focus_op.focus();
        clearInterval(this.polling);
      }, 500);
    },
    cancelOptionSell(){
      this.FormOPS = false
    },
    SaveOptionSell(){

      if(this.FormOPType){
          this.ProductOption.push({
            option_id: 'OP'+ Math.floor(Math.random() * 100000000),
            option_name: this.FormOP.option_name,
            option_default: 'false'
          })
      } else {

        let findex = this.ProductOption.findIndex((i) => i.option_id == this.FormOP.option_id)

        this.ProductOption[findex] = {
            option_id: this.FormOP.option_id,
            option_name: this.FormOP.option_name,
            option_default: this.FormOP.option_default
            }
      }
      this.FormOP.option_name = ''
      this.FormOPS = false
      this.FormOPType = true
    },
    edit_option_product(index,id){
      this.FormOPS = true
      this.FormOPType = false
      let item = this.ProductOption.find((i)=> i.option_id == id)
      //console.log(item)
      this.FormOP.option_id = item.option_id
      this.FormOP.option_name = item.option_name
      this.FormOP.option_default = item.option_default

       this.polling = setInterval(() => {
        this.$refs.focus_op.focus();
        clearInterval(this.polling);
      }, 500);

    },
    del_option_product(index,id){


        let lop = this.Product.price_sell
        let new_d = []
        for (let i = 0; i < lop.length; i++) {
          console.log(lop.length)
            //if(lop[i]!=''){
              if(id != lop[i].option_id){

                   new_d.push({
                    option_id: lop[i].option_id,
                    pbc_id: lop[i].pbc_id,
                    barcode: lop[i].barcode,
                    price_type: lop[i].price_type,
                    price: lop[i].price,
                    price_pro: lop[i].price_pro,
                    unit: lop[i].unit_add,
                    default: lop[i].default,
                    default_pro: lop[i].default_pro,
                    sell: lop[i].sell,
                  })
              }
           // }
        }

        this.Product.price_sell = new_d

        let findex = this.ProductOption.findIndex((i) => i.option_id == id);
        this.ProductOption.splice(findex, 1);

    },
    /// barcode printt
    print_barcode(barcode){
      window.open(window.location.origin+'/api/printlabel/'+barcode, "_blank");
    },
    product_info(product_id){
     // alert(product_id)
     $("#Listbarcode").modal("show");
     this.loading_info = true;
      this.$axios.get("/sanctum/csrf-cookie").then((response) => {
        axios
          .get(`/api/store/product/edit/${product_id}`)
          .then((response) => {
            if(response.data.message){
            this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + response.data.message, }, 4000 );
            this.$Progress.fail();
            } else {

                let product_data = response.data.product_data
                this.product_data_pre.product_option = response.data.product_option
                this.product_data_pre.product_barcode = response.data.product_barcode
                this.product_data_pre.images = JSON.parse(product_data[0].product_images)[0].img
                this.product_data_pre.product_name = product_data[0].product_name

                this.session_name = response.data.product_session[0].session_name
                this.category_name = response.data.product_session[0].category_name
                this.sub_category_name = response.data.product_session[0].sub_category_name
                this.in_store_num = response.data.product_data[0].in_store
                this.in_store_unit = response.data.product_data[0].unit_name
                //console.log(this.list_barcode_pr.find((i)=>i.price_type == 'fonta'))
                

                //console.log(this.product_data_pre.product_option.find((i)=>i.option_default=='true').option_id)

                this.polling2 = setInterval(() => {
                  JsBarcode(".barcode").options({width: 3,height: 60}).init();
                  clearInterval(this.polling2);
                }, 50);
                this.loading_info = false;
              }
          })
          .catch((error) => {
            this.$Progress.fail();
            this.dable_add = false;
            this.$notify( { group: "error", title: "ບໍ່ສຳເລັດ!", text: "ຜິດຜາດ: " + error.message, }, 4000 );
          });
      });
      //this.Product.barCode
     // window.open(window.location.origin+'/api/printlabel/'+this.Product.barCode, "_blank");
    },
    selectOP(id){
          let db = this.product_data_pre.product_option
          for (let i = 0; i < db.length; i++) {
            if(db[i]!=''){
              if(db[i].option_id == id){
                this.product_data_pre.product_option[i].option_default = 'true'
              } else {
                this.product_data_pre.product_option[i].option_default = 'false'
              }
            }
          }
          this.polling2 = setInterval(() => {
            JsBarcode(".barcode").options({width: 3,height: 60}).init();
            clearInterval(this.polling2);
          }, 10);
    },
    CancelListbarcode(){
      $("#Listbarcode").modal("hide")
    },
  },
  created() {
    this.$axios.get(`/api/users/checkauth`).then((response) => {
      if (!response.data.isLogin) {
        window.location.href = "/";
      }
    });

    //this.GetAllSes();
    this.GetAllProduct();
    this.GetAllUnit();

    /// get session
    if(!this.$store.getters["getallsession"]){
         this.$store.dispatch({ type:"reSetSession" })
        }

      if(window.Laravel.isLoggedin){
           this.isLoggedIn = true
        }

  },

  beforeRouteEnter(to, from, next) {
    if (!window.Laravel.isLoggedin) {
      window.location.href = "/";
    }
    next();
  },
};
</script>

<style lang="scss" scoped>
hr{
  margin-bottom: 0px;
  margin-top: 0px;
}
.box-img {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
.cards {
  display: grid;
  grid-gap:15px;
  grid-template-columns: auto auto auto;
  justify-content: center;
}
svg {
  width: 100%;
}
.card-title {
  margin: 10px 0 0 0;
}
</style>