<template>
  <div class="app-container">
      <div class="app-content">
           <div class="title">
             药品销售统计
          </div>
         <el-form class="search-form" :inline="true" >
          <el-form-item >
            <el-select v-model="value" placeholder="请选择日期">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            <treeselect :clearable="false"  v-model="deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门" />
          </el-form-item>
          <el-form-item>
            <el-select filterable v-model="userIds" placeholder="请选择员工" clearable size="small">
                <el-option
                  v-for="item in users"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId">
                </el-option>
              </el-select>
          </el-form-item>

          <el-form-item>
              <el-button type="cyan" icon="el-icon-search"   @click="storeOrder">搜索</el-button>
          </el-form-item>
        </el-form>
         <div class="data-box">

            <div class="table-box">
                  <el-button class="export" size="small"  @click="handleExport"   v-hasPermi="['statistics:customer:index']">导出</el-button>
                  <el-table
                  :data="list"
                  border
                  max-height="500"
                  style="width: 100%;">
                  <el-table-column
                    prop="productName"
                    label="商品名称"  show-overflow-tooltip="true" :formatter="formatData" >
                  </el-table-column>
                  <el-table-column
                  label="商品编号"   prop="barCode">
                  </el-table-column>
                  <el-table-column
                    label="单价"  >
                    <template slot-scope="scope">
                  <span>{{scope.row.price}}</span>
                   </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    label="销售数量" >
                  </el-table-column>
                </el-table>
            </div>
        </div>
      </div>

    </div>
</template>

<script>
import { product,exportProduct } from "@/api/store/statistics";
import { getUserListByDeptId} from "@/api/company/companyUser";

import resize from '../../dashboard/mixins/resize'
import { treeselect } from "@/api/company/companyDept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
name: 'Index',
mixins: [resize],
components: { Treeselect },
watch: {
// 监听deptId
'deptId': 'currDeptChange'
},
data() {
return {
 deptOptions:[],
 deptId:undefined,
 userIds:undefined,
 users:[],
 dateRange:[],
 chart: null,
 options: [{
    value: '1',
    label: '今天'
  }, {
    value: '2',
    label: '昨天'
  }, {
    value: '3',
    label: '本周'
  }, {
    value: '4',
    label: '上周'
  }, {
    value: '5',
    label: '本月'
  }
  , {
    value: '6',
    label: '上月'
  }
  , {
    value: '7',
    label: '本季度'
  }
  , {
    value: '8',
    label: '上季度'
  }
  , {
    value: '9',
    label: '本年'
  }
  , {
    value: '10',
    label: '上年'
  }],
  value: '5',
  list:[],
  dates:[],
  orderCount:[],
  payPrice:[],

}
},
created() {
this.getTreeselect();
},
methods: {
  currDeptChange(val){
  console.log(val)
  this.deptId=val;
  this.getUserListByDeptId();
},
/** 查询部门下拉树结构 */
getTreeselect() {
var that=this;
treeselect().then((response) => {
  this.deptOptions = response.data;
  console.log(this.deptOptions)
  if(response.data!=null&&response.data.length>0){
    this.deptId=response.data[0].id;
    that.storeOrder()
  }
});
},
handleExport(){
  var data;
  if(this.userIds!=undefined){
      data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
  }
  else{
      data={type:this.value,deptId:this.deptId}
  }
  exportProduct(data).then((response) => {
     this.download(response.msg);
  });

},
formatData(row, column, cellValue) {
        if (cellValue === null || cellValue === undefined || cellValue === '') {
          return '该商品已被删除';
        }
        return cellValue;
      },
getUserListByDeptId() {
  this.userIds=undefined;
  var data={deptId:this.deptId};
  getUserListByDeptId(data).then(response => {
    this.users = response.data;

  });
},
storeOrder(){
    var data;
    if(this.userIds!=undefined){
        data={type:this.value,userIds:this.userIds+"",deptId:this.deptId}
    }
    else{
        data={type:this.value,deptId:this.deptId}
    }
    product(data).then((response) => {
     this.list=response.data;
  });
},


}
}
</script>

<style lang="scss" scoped>
.app-container{
border: 1px solid #e6e6e6;
padding: 12px;

.app-content{
background-color: white;
.title{
  padding: 20px 30px 0px 30px;
  font-size: 18px;
  font-weight: bold;
  color: black;

}
.search-form{
  margin: 20px 30px 0px 30px;
}
.data-box{
  padding: 30px;
  background-color:  rgb(255, 255, 255);
  height: 100%;

  .echart-box{
    margin: 0 auto;
    text-align: center;
  }
  .el-select{
    margin: 5px 10px;
  }
  .table-box{
    margin-top: 15px;
    .export{
      float: right;
      margin: 10px 0px;
    }
  }
}
}
}
#echart-customer{
width:100%;
height:320px
}
.vue-treeselect{
width: 217px;
height: 36px;
}

</style>
<style>
.vue-treeselect__control{
display: block;
}
</style>
