<style>
  .page_demandInquiry ._mc_addbox {
    padding: 30px 0
  }

  .page_demandInquiry ._mc_edit {
    overflow: auto;
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #d1d1d1;
    background-color: #f9f9f9;
    padding: 15px 33px;
    width: 100%;
    min-width: 1146px;
    padding-right: 10px
  }

  .page_demandInquiry .edHeight {
    display: block;
    height: 200px;
  }

  .page_demandInquiry ._mc_list {
    overflow-x: auto;
  }

  .page_demandInquiry ._mc_list>ul>li {
    padding: 20px 20px 0 20px;
    width: 280px;
    height: 302px;
    float: left;
    border: 1px solid #F1F2F5;
    margin-right: 10px;
    margin-bottom: 20px
  }

  .page_demandInquiry ._mc_list>ul>li:hover {
    box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
    transition: all linear 0.5s;
  }

  .page_demandInquiry ._bt span {
    color: #FF9000
  }

  .page_demandInquiry ._edHeight {
    height: 500px;
  }

  .page_demandInquiry ._scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  .page_demandInquiry ._scrollbar::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #c9c9c9;
  }

  .page_demandInquiry ._scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #EDEDED;
  }

  .page_demandInquiry ._mc_list ._tit,
  ._mc_edit ._tit {
    padding-left: 10px;
    border-left: 3px solid #E95252;
    margin-bottom: 25px;
    height: 14px;
    line-height: 14px;
    font-size: 14px;
    color: #000000;
    position: relative;
  }

  .page_demandInquiry ._mc_edit ._info_box ul._form li {
    float: left;
  }

  .page_demandInquiry ._check_list {
    padding-left: 120px;
    margin-bottom: 20px;
  }

  .page_demandInquiry ._check_box .el-form-item {
    margin-bottom: 0
  }

  .page_demandInquiry ._remark textarea {
    resize: none;
    width: 646px;
    height: 100px
  }

  .page_demandInquiry ._vr_left {
    width: 700px;
    margin-right: 20px;
  }

  .page_demandInquiry ._vr_left ul {
    margin-top: 20px;
    max-height: 630px;
    overflow-y: auto;
  }

  .page_demandInquiry ._vr_left ul li {
    padding: 25px;
    color: #FFFFFF;
    font-size: 14px;
    text-align: center;
    float: left;
    border-top: 1px solid #F1F2F5;
    border-bottom: 1px solid #F1F2F5;
    background-color: #FFFFFF;
    margin-bottom: 20px;
    cursor: pointer;
  }

  .page_demandInquiry ._vr_left ul li:first-child {
    border-left: 1px solid #F1F2F5;
  }

  .page_demandInquiry ._vr_left ul li:last-child {
    border-right: 1px solid #F1F2F5;
  }

  .page_demandInquiry ._vr_left ul li:nth-child(4n+0) {
    border-right: 1px solid #F1F2F5;
  }

  .page_demandInquiry ._vr_left ul li:nth-child(5),
  .page_demandInquiry ._vr_left ul li:nth-child(9) {
    border-left: 1px solid #F1F2F5;
  }

  .page_demandInquiry ._vr_left ul li>div {
    width: 120px;
    height: 120px;
    background: rgba(42, 174, 242, 1);
    border-radius: 46px;
    border: 6px solid rgba(85, 190, 245, 1);
  }

  .page_demandInquiry ._vr_left ul li>div p:nth-child(1) {
    font-weight: bold;
    font-size: 18px;
    margin-top: 30px
  }

  .page_demandInquiry ._vr_left ul li>p {
    color: #333333;
    margin-top: 10px
  }

  .height-auto .el-input {
    height: auto !important
  }

</style>
<template>
  <div class="page_demandInquiry">
    <div class="_mc_addbox">
      <button class="hollowFixedBtn" @click="addShow=true">{{$t('pub.addBtn')}}</button>
    </div>
    <div class="_mc_list _scrollbar" :class="addShow==true?'_edHeight':''">
      <div class="_vr_left fl">
        <p class="_tit">{{$t('salesModule.InquiryAndDemand')}}</p>
        <ul>
          <li v-for="(item,index) in inquireLineStatistical"
            @click="goUrl('demandStatistics',item.lineId,item.lineName)">
            <div>
              <p class="PingFangSC">{{item.inquireCount}}{{$t('pub.Ci')}}</p>
              <p>{{item.inqiurePercent}}%</p>
            </div>
            <p>{{item.lineName}}</p>
          </li>
        </ul>
        <div class="noData" v-show="inquireLineStatistical.length==0">
          {{$t('system.content_noData')}}
        </div>
      </div>
      <div class="_vr_right fl">
        <p class="_tit">{{$t('salesModule.ZixunHotLine')}}</p>
        <div class="charts" style="margin-top: 20px;">
          <el-col :span='24'>
            <div id="chartsMap" style="height:630px;width:850px;"></div>
          </el-col>
        </div>
      </div>
    </div>
    <div class="_mc_edit _scrollbar" :class="addShow==true?'edHeight':''">
      <p class="_tit">{{$t('salesModule.addCustomer')}}
        <span class="fr">
          <button class="hollowFixedBtn" type="button"
            @click="cancelEdit(),resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
          <button type="button" class="normalBtn" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
        </span>
      </p>
      <el-form class="_info_box clearfix" :model="addMsg" :rules="rules" ref="addMsg" label-width="120px">
        <ul class="_form clearfix">
          <li>
            <el-form-item :label="$t('fnc.khleixing')" prop="linshig">
              <div class="w210">
                <el-radio v-model="addMsg.linshig"
                  @change="addMsg.CustomerName = '', addMsg.CustomerInfoId = 0, AppCoustomer = []" label="1">
                  {{$t('salesModule.InformalClient')}}</el-radio>
                <el-radio v-model="addMsg.linshig"
                  @change="addMsg.CustomerName = '', addMsg.CustomerInfoId = 0, AppCoustomer = []" label="2">
                  {{$t('salesModule.LinshiCustomer')}}</el-radio>
              </div>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('pub.Customer')" prop="CustomerInfoId">
              <el-select :multiple="false" filterable remote reserve-keyword :placeholder="$t('pub.PleaseKeyWords')"
                :remote-method="getAppCoustomer" @change="getAppCoustomerName" :loading="loading"
                v-model="addMsg.CustomerInfoId" v-if="addMsg.linshig == '1'" class="w210 height-auto">
                <el-option :placeholder="$t('pub.pleaseSel')" v-for="item in AppCoustomer" :key="item.customerId"
                  :label="`${item.customerName}(${item.contact})`" :value="item.customerId">
                </el-option>
              </el-select>
              <el-input v-else v-model="addMsg.CustomerName" :placeholder="$t('pub.pleaseImport')" class="w210">
              </el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('salesModule.XunwenLine')" prop="LineId">
              <el-select v-model="addMsg.LineId" class="w210" :placeholder="$t('pub.pleaseSel')"
                @change="getLineTeamList(addMsg.LineId)">
                <el-option :placeholder="$t('pub.pleaseSel')" v-for="item in InquireLineList" :key="item.LineID"
                  :label="item.LineName" :value="item.LineID">
                </el-option>
              </el-select>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('advmanager.v_xilie')">
              <el-select v-model="addMsg.LineteamId" class="w210" :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('system.ph_buxian')" value=''></el-option>
                <el-option :placeholder="$t('pub.pleaseSel')" v-for="item in LineteamList" :key="item.id"
                  :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('Airticket.Air_StartTime')" prop="DepartTime">
              <el-date-picker clearable class="w210" v-model="addMsg.DepartTime" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('admin.admin_choDate')">
              </el-date-picker>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('salesModule.PriceExpect')" prop="BudgetPrice">
              <el-input v-model="addMsg.BudgetPrice" :placeholder="$t('pub.pleaseImport')" class="w210"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('salesModule.PeopleCount')" prop="PeopleNumber">
              <el-input v-model="addMsg.PeopleNumber" :placeholder="$t('pub.pleaseImport')" class="w210"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('pub.pubRemark')">
              <el-input v-model='addMsg.Remark' class="w210" type='textarea' maxlength='500'></el-input>
            </el-form-item>
          </li>
        </ul>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        addMsg: {
          CustomerInfoId: '',
          LineId: '',
          DepartTime: '',
          BudgetPrice: '',
          PeopleNumber: '',
          LineteamId: '',
          Remark: '',
          linshig: '1',
          CustomerName: ''
        },
        loading: false,
        rules: {
          CustomerInfoId: [{
            required: true,
            message: "请输选择客户",
            trigger: "change"
          }],
          LineId: [{
            required: true,
            message: "请输选择线路",
            trigger: "change"
          }],
          DepartTime: [{
            required: true,
            message: "请选择时间",
            trigger: "blur"
          }],
          contactNumber: [{
            required: true,
            message: "请输入联系电话",
            trigger: "blur"
          }],
          BudgetPrice: [{
              required: true,
              message: "请输入预计价格",
              trigger: "blur"
            },
            {
              pattern: this.$commonUtils.Regex.el_Isdecimal,
              message: "请输入正确的价格"
            }
          ],
          PeopleNumber: [{
              required: true,
              message: "请输入人数",
              trigger: "blur"
            },
            {
              pattern: this.$commonUtils.Regex.el_isInteger,
              message: "请输入正确的人数"
            }
          ],
        },
        addShow: false,
        noData: false,
        dayS: 0,
        dayArr: [],
        inquireHotLine: [],
        b2bClickHotLine: [],
        inquireLineStatistical: [],
        inquireHotLineStatistical: [],
        b2bClickHotLineStatistical: [],
        AppCoustomer: [],
        InquireLineList: [],
        LineteamList: [],
      }
    },
    methods: {
      getAppCoustomerName(t) {
        this.AppCoustomer.forEach(x => {
          if (t == x.customerId) {
            this.addMsg.CustomerName = x.customerName
          }
        })
      },
      getInquireLineList() { // 获取线路下拉
        this.apipost('line_post_GetAllList', {}, res => {
          if (res.data.resultCode == 1) {
            this.InquireLineList = res.data.data;
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      //获取系列列表
      getLineTeamList(lineId) {
        this.LineteamList = []
        this.apipost("b2b_get_GetLineTeam", {
          lineId: lineId
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg.LineteamId = ''
            this.LineteamList = res.data.data;
          }
        });
      },
      getAppCoustomer(query) { // 获取客户列表  
        if (query !== '') {
          this.apipost('app_post_GetCustomerBrandByKeyWord', {
            customerInfo: query
          }, res => {
            if (res.data.resultCode == 1) {
              this.AppCoustomer = res.data.data;
            } else {
              this.$message.error(res.data.message)
            }
          }, err => {})
        } else {
          this.AppCoustomer = [];
        }

      },
      getInquireLineNeed() { //获取线条条数据
        this.apipost('app_my_inquire_line_need', {}, res => {
          if (res.data.resultCode == 1) {
            this.inquireLineStatistical = res.data.data.inquireLineStatistical
            this.inquireHotLineStatistical = res.data.data.inquireHotLineStatistical
            this.b2bClickHotLineStatistical = res.data.data.b2bClickHotLineStatistical
            if (this.inquireHotLineStatistical.length > 0) {
              this.inquireHotLine = []
              this.dayArr = []
              this.inquireHotLineStatistical.forEach(x => {
                this.dayArr.push(x.date.substring(5, x.date.length))
                this.inquireHotLine.push(x.inquireCount)
              });
            }
            if (this.b2bClickHotLineStatistical.length > 0) {
              this.b2bClickHotLine = []
              this.b2bClickHotLineStatistical.forEach(x => {
                this.b2bClickHotLine.push(x.clickCount)
              });
            }
            this.chartsMap(this.inquireHotLine, this.b2bClickHotLine);
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      chartsMap(see, clc) { // 画饼
        var then = this;
        if (then.inquireLineStatistical && then.inquireLineStatistical.length > 0) {
          let myChart = this.$echarts.init(document.getElementById('chartsMap'));
          myChart.setOption({
            title: {
              text: then.inquireLineStatistical[0].lineName,
              left: 'left',
              textStyle: {
                fontWeight: 'bold',
                fontSize: 14,
                color: '#333333',
                height: '30px'
              },
              padding: [
                20, // 上
                20, // 右
                20, // 下
                20, // 左
              ]
            },
            backgroundColor: '#fff',
            legend: {
              icon: 'rect',
              selectedMode: false,
              orient: 'vertical',
              x: 'right',
              data: ['b2b点击', '询价']
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'line',
                animation: false,
                label: {
                  backgroundColor: '#ccc',
                  borderColor: '#aaa',
                  borderWidth: 1,
                  shadowBlur: 0,
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  textStyle: {
                    color: '#222'
                  }
                }
              }
            },
            xAxis: {
              type: 'category',
              axisLine: {
                show: false,
                lineStyle: {
                  width: 30
                }
              },
              axisLabel: {
                interval: 5
              },
              axisTick: false,
              data: then.dayArr,
            },
            grid: {
              x: 25,
              y: 60,
              x2: 5,
              y2: 20,
              containLabel: true
            },
            yAxis: {
              type: 'category',
              data: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
              axisLine: {
                show: false
              },
              axisTick: false,
              splitLine: {
                show: false
              },
              scale: true,
              minInterval: 1,
              type: 'value',
              axisLabel: {
                formatter: '{value} 个'
              }
            },
            series: [{
                name: 'b2b点击',
                type: 'line',
                smooth: false,
                data: clc,
                lineStyle: {
                  width: 3,
                  color: '#50C291',
                },
                itemStyle: {
                  borderWidth: 2,
                  color: '#50C291'
                },
                symbol: 'none',
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: 'rgba(230,230,230,0)' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: 'rgba(230,230,230,0)' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  }
                }
              },
              {
                name: '询价',
                type: 'line',
                smooth: false,
                data: see,
                lineStyle: {
                  width: 3,
                  color: '#FF793E',
                },
                itemStyle: {
                  borderWidth: 2,
                  color: '#FF793E'
                },
                symbol: 'none',
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: 'rgba(230,230,230,0)' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: 'rgba(230,230,230,0)' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  }
                }
              }
            ]
          }, true)
        }
      },
      submitForm(addMsg) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.saveVisa()
          } else {
            return false;
          }
        });
      },
      saveVisa() { // 保存
        this.apipost('app_add_inquire', this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message)
            this.addShow = false
            this.initMsg()
            this.getInquireLineNeed()
          } else {
            this.$message.error(res.data.message)
          }
        }, err => {})
      },
      cancelEdit() { // 取消新增
        this.addShow = false
        this.initMsg()
      },
      initMsg() {
        this.LineteamList = []
        this.addMsg = {
          CustomerInfoId: '',
          LineId: '',
          DepartTime: '',
          BudgetPrice: '',
          PeopleNumber: '',
          LineteamId: '-1',
          Remark: ''
        }
      },

      resetForm(formName) { // 重置表单
        this.$refs[formName].resetFields();
      },
      getCountDays() {
        var curDate = new Date();
        // 获取当前月份
        var curMonth = curDate.getMonth();
        // 实际月份比curMonth大1，下面将月份设置为下一个月
        curDate.setMonth(curMonth + 1);
        // 将日期设置为0，表示自动计算为上个月（这里指的是当前月份）的最后一天
        curDate.setDate(0);
        // 返回当前月份的天数
        return curDate.getDate();
      },
      goUrl(path, id, name) {
        this.$router.push({
          name: path,
          query: {
            "id": id,
            "name": name
          }
        })
      }
    },
    mounted() {
      // this.dayS = this.getCountDays()
      // for(let i=1;i<=this.dayS;i++){
      //     this.dayArr.push(i+'日')
      // }

      this.getInquireLineNeed()
      this.getInquireLineList()
    }
  }

</script>
