<style>
  li {
    list-style-type: none;
  }

  .courseOffer ul {
    padding: 0px;
  }

  .courseOffer li {
    background: rgba(221, 222, 224, 0.2);
    border-radius: 4px;
    margin-top: 15px;
  }

  .courseOffer li .dline {
    display: table;
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .courseOffer li .d1,
  .courseOffer li .d2,
  .courseOffer li .d3,
  .courseOffer li .d4,
  .courseOffer li .d5 {
    width: 18%;
    padding: 20px 20px 10px;
  }

  .courseOffer li .d7 {
    flex: 1;
    width: 1px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .courseOffer li .d1 .di-title {
    font-size: 16px;
    color: #111111;
  }

  .courseOffer li .d1 .di-c {
    font-size: 14px;
    display: flex;
    line-height: 28px;
    color: #111111;
  }

  .courseOffer li .d6 {
    padding: 10px 20px;
    width: 100%;
    height: inherit;
    position: relative;
    border-top: 1px solid #dddee0;
  }

  .courseOffer li .d6 .progress {
    width: 100%;
    height: 5px;
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .courseOffer li .d2 div {
    margin: 2px 0;
    font-size: 14px;
    color: #111111;
  }

  .courseOffer li .d2-n {
    font-size: 12px;
    color: #999999;
    margin-right: 20px;
  }

  .courseOffer li .d3 .d3-s {
    color: var(--q-color-negative);
    font-weight: bold;
  }

  .courseOffer li .d3 div {
    margin: 2px 0;
    font-size: 14px;
  }

  .courseOffer li .d4 div {
    font-size: 14px;
    color: #111111;
    margin: 2px 0;
  }

  .courseOffer li .d5 div {
    font-size: 14px;
    color: #111111;
    margin: 2px 0;
  }

  .courseOffer .myCourseNName {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #fff !important;
    text-align: center;
    line-height: 25px;
    background-color: #004d40;
  }

</style>
<template>
  <div class="page-body courseOffer">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.Name" label="报价单名称"
            @clear="resetSearch" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select filled stack-label use-input option-value="Id" clearable @input="resetSearch"
            option-label="EmployeeName" v-model="msg.CreateBy" :options="EmployeeList"
            label="直属上级" :dense="false" emit-value map-options @filter="filterFn">
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey">
                  未找到相关数据
                </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-tow-column-table"
        separator="none" :data="data" :columns="columns" row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">课程报价单</div>
          <q-space />
        </template>
        <template v-slot:body-cell-OrderIdList="props">
          <q-td :props="props">
            <span title="点击查看订单" v-for="item in props.row.OrderIdList"
              style="cursor:pointer;color:blue;margin-left:5px;" @click="goOrderList(item)">{{item}}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <div>
              <q-btn flat size="xs" icon="edit" color="accent" v-if="isHavePriceAction" style="font-weight:400" label="改价"
                @click="editOrderPrice(props.row)" />
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="详情"
                @click="gotoDetails(props.row)" />
            </div>
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>

    <q-dialog v-model="showForm" persistent>
      <quotation-form :obj="offerObj" @save="refreshPage()"></quotation-form>
    </q-dialog>

    <q-dialog v-model="showOrderForm" persistent>
      <offertransorder-form :obj="offerObj" @save="refreshPage()"></offertransorder-form>
    </q-dialog>

    <q-dialog v-model="showEditPrice" persistent>
      <edittransorder-form :obj="offerObj" @save="refreshPage()"></edittransorder-form>
    </q-dialog>
    <!-- 查看报价单 -->
    <viewquotation-form v-if="isShowviewQuo" :rId="rId" :isShowCancle="1" @close="closeQuota">
    </viewquotation-form>

  </div>
</template>
<script>
  import quotationForm from '../../components/sale/quotation-form'
  import offertransorderForm from '../../components/sale/offertransorder-form'
  import edittransorderForm from '../../components/sale/edittransorder-form'
  import viewquotationForm from '../../components/sale/viewquotation-form'

  import {
    queryCourseOfferPage,
  } from '../../api/course/index'
  //员工
  import {
    queryEmployee
  } from '../../api/users/user'
  import {
    mapState
  } from "vuex";

  export default {
    meta: {
      title: "报价单"
    },
    components: {
      quotationForm,
      offertransorderForm,
      edittransorderForm,
      viewquotationForm
    },
    data() {
      return {
        currentUrl: "",
        data: [],
        loading: true,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          Name: "",
          CreateBy:0,
          IsGetDetails: 1,
          CreateBy: 0
        },
        pageCount: 0,
        showForm: false, //是否显示报价单弹窗
        offerObj: {}, //报价单信息
        columns: [{
            name: "SerialNum",
            label: "流水号",
            field: "SerialNum",
            align: "left"
          },
          {
            name: "Name",
            label: "名称",
            field: "Name",
            align: "left"
          },
          {
            name: "CustomerName",
            required: true,
            label: "客户信息",
            align: "left",
            field: row => row.CustomerName
          },
          {
            name: "CustomerTel",
            required: true,
            label: "客户电话",
            align: "left",
            field: row => row.CustomerTel
          },
          {
            name: "TotalOriginalPrice",
            required: true,
            label: "总原价",
            align: "left",
            field: row => row.TotalOriginalPrice.toFixed(2)
          },
          {
            name: "TotalPrice",
            required: true,
            label: "总价",
            align: "left",
            field: row => row.TotalPrice.toFixed(2)
          },
          {
            name: "TotalDiscountPrice",
            required: true,
            label: "总优惠",
            align: "left",
            field: row => row.TotalDiscountPrice.toFixed(2)
          },
          {
            name: "JoinNum",
            label: "报名人数",
            field: "JoinNum",
            align: "left",
            format: (val, row) => `${val}人`
          },
          {
            name: "CustomerStatusName",
            label: "状态",
            field: "CustomerStatusName",
            align: "left",
            format: (val, row) => `${val}`
          },
          {
            name: "CreateByName",
            label: "销售",
            field: "CreateByName",
            align: "left",
          },
          {
            name: "CreateTimeStr",
            label: "报价时间",
            field: "CreateTimeStr",
            align: "left"
          },
          {
            name: "OrderIdList",
            label: "订单号",
            field: "OrderIdList",
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'Id'
          }
        ],
        showOrderForm: false, //是否显示转订单表单
        commonId: 0,
        showEditPrice: false, //是否显示改价表单
        EmployeeList:[], //员工列表
        AllemployeeList: [], //所有员工列表
        isShowviewQuo:false,
        rId:0
      }
    },
    computed: mapState({
      isHavePriceAction(state) {
        if (state.user.userInfo.ActionMenuList) {
          let action = state.user.userInfo.ActionMenuList.find(x => {
            if (x.FunctionCode == "Edit_Offer_Price") {
              return x;
            }
          });
          return action && action.FunctionCode;
        }
        return false;
      }
    }),
    mounted() {
      this.currentUrl = this.$route.path;
      this.Employee();
      this.getcourseofferpage();
    },
    methods: {
      closeQuota(){
        this.isShowviewQuo=false;
      },
      //筛选员工
      filterFn(val, update) {
        update(() => {
          if (val === '') {
            this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList))
          } else {
            const needle = val.toLowerCase()
            this.EmployeeList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1)
          }
        })
      },
      Employee() {
        var qMsg = {
          EmployeeName: ''
        }
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            var jsonData = res.Data;
            if (jsonData && jsonData.length > 0) {
              jsonData.unshift({
                Id: 0,
                EmployeeName: "请选择"
              });
              this.AllemployeeList = JSON.parse(JSON.stringify(jsonData));
              this.EmployeeList = JSON.parse(JSON.stringify(jsonData));;
            }
          }
        }).catch(() => {

        })
      },
      //跳转到订单列表
      goOrderList(item) {
        this.$router.push({
          path: "/sale/myOrder",
          query: {
            OrderId: item
          }
        });
      },
      //报价单转订单
      offerTransOrder(item) {
        this.offerObj = item;
        this.showOrderForm = true;
      },
      //改价
      editOrderPrice(item) {
        this.offerObj = item;
        this.showEditPrice = true;
      },
      //刷新页面
      refreshPage() {
        this.showForm = false;
        this.showOrderForm = false;
        this.showEditPrice = false;
        this.getcourseofferpage();
      },
      gotoDetails(item) {
        this.rId=item.Id;
        this.isShowviewQuo=true;
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getcourseofferpage();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getcourseofferpage()
      },
      //获取报价单分页列表
      getcourseofferpage() {
        this.loading = true;
        queryCourseOfferPage(this.msg).then(res => {
          this.loading = false
          this.data = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        }).catch(() => {
          this.loading = false
        })
      },
    }
  }

</script>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
